Classic Site Image Map Preview

imagemap.html

<style>
	.box {
		display: inline-block;
		border: 2px solid #f2f2f2;
		margin: 10px;
		padding: 10px;
		vertical-align: middle;
		border-radius: 10px;
		font-family: monospace;
		color: #333;
		text-align: center;
	}
	.grid {
		background-image:
			-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #d3d3d3), color-stop(.25, transparent)),
			-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #d3d3d3), color-stop(.25, transparent)),
			-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #d3d3d3)),
			-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #d3d3d3));
		background-size:20px 20px;
		background-position:0 0, 50px 0, 50px -50px, 0px 50px;
	}
	p {
		margin-top: 0;
		border-bottom: 2px solid #f2f2f2;
		padding-bottom: 10px;
	}
	img {
		max-width: 200px;
	}
</style>
<script>
var httpRequest;

function template(key, img) {
	return `<div class="box">
				<p>${key}</p>
				<div class="grid"><a href="${img}"><img src="${img}" /></a></div>
			</div>`;
}

function embedMap(map) {
	var html = '',
		images = [],
		size;

	for (var key in map) {
		if (map.hasOwnProperty(key)) {
			size = map[key].large || map[key].medium || map[key].small;
			images.push({
				key: key,
				html: template(key, size.src['1'])
			});
		}
	}

	html = images.sort(function (a, b) {
		return a.key > b.key ? 1 : -1;
	}).map(function (image) {
		return image.html;
	}).join('');

	document.body.insertAdjacentHTML('beforeend', html);

}

function get(url, response) {
	httpRequest = new XMLHttpRequest();
	httpRequest.onreadystatechange = response;
	httpRequest.open('GET', url);
	httpRequest.send();
}

get('./tmp/site_imageMap.json', function () {
	if (httpRequest.readyState === XMLHttpRequest.DONE) {
		if (httpRequest.status === 200) {
			embedMap(JSON.parse(httpRequest.responseText));
		}
	}
});

</script>