Untitled

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<title>The Sinnoh Region</title>
	<style>
		* {
			color: #eee;
			-webkit-box-sizing: border-box;
			-khtml-box-sizing: border-box;
			-moz-box-sizing: border-box;
			-ms-box-sizing: border-box;
			-o-box-sizing: border-box;
			box-sizing: border-box;
			-webkit-transition: 0.05s ease-in;
			-khtml-transition: 0.05s ease-in;
			-moz-transition: 0.05s ease-in;
			-ms-transition: 0.05s ease-in;
			-o-transition: 0.05s ease-in;
			transition: 0.05s ease-in;
			font-family: courier;
		}
		#sinnoh {
			cursor: pointer;
		}
		div, img {
			margin: -2px;
			position: absolute;
			display: inline-block;
		}
		.nameplate {
			padding: 50px;
			text-align: center;
			background: transparent;
			color: transparent;
			font-size: 2em;
		}
		.nameplate:hover {
			background: rgba(160, 160, 200, .5);
			color: #eee;
		}
	</style>
	<script>
	$(document).ready(function() {
		var sinnoh = [
			{
				"name": "veritylakefront",
				"x": 0,
				"y": 8,
				"url": "http://i.imgur.com/2lnOcxb.png"
			},
			{
				"name": "route201",
				"x": 1,
				"y": 8,
				"url": "http://i.imgur.com/H0OXdNl.png"
			},
			{
				"name": "twinleaftown",
				"x": 1,
				"y": 9,
				"url": "http://i.imgur.com/Um4Dc1i.png"
			},
			{
				"name": "sandgemtown",
				"x": 3,
				"y": 8,
				"url": "http://i.imgur.com/Nyin8mI.png"
			},
			{
				"name": "jubilifecity",
				"x": 2,
				"y": 5,
				"url": "http://i.imgur.com/0SIqnfr.png"
			},
			{
				"name": "route202",
				"x": 3,
				"y": 7,
				"url": "http://i.imgur.com/RPFayaI.png"
			},
			{
				"name": "route219",
				"x": 3,
				"y": 9,
				"url": "http://i.imgur.com/Ec8IxTI.png"
			},
			{
				"name": "route220",
				"x": 3,
				"y": 10,
				"url": "http://i.imgur.com/5uBhjch.png"
			},
			{
				"name": "route204",
				"x": 3,
				"y": 3,
				"url": "http://i.imgur.com/evKGiip.png"
			},
			{
				"name": "route203",
				"x": 4,
				"y": 5,
				"url": "http://i.imgur.com/TVd8UO2.png"
			},
			{
				"name": "floaromatown",
				"x": 3,
				"y": 1,
				"url": "http://i.imgur.com/2s71Yat.png"
			},
			{
				"name": "route205",
				"x": 4,
				"y": 0,
				"url": "http://i.imgur.com/om4hwdM.png"
			},
			{
				"name": "oreburghcity",
				"x": 6,
				"y": 5,
				"url": "http://i.imgur.com/wY4g2D4.png"
			}
		];

		var sheet = $('#sinnoh');
		{
			var m,
				x,
				y,
				el,
				img,
				nameplate,
				map;
			for (var n = 0; n < sinnoh.length; n++) {
				map = sinnoh[n];
				m = map.name == 'floaromatown' ? 501.25 : 512;
				x = map.x * m;
				y = map.y * 512;
				el = $('<div>', {
					id: map.name
				}).css({
					top: y,
					left: x
				});
				img = $('<img>', {
					src: map.url,
					alt: map.name
				}).appendTo(el.appendTo(sheet));

				img.load((function(par, map) {
					return function() {
						var self = $(this);
						par.append($('<div>', {
							html: map.name,
							class: 'nameplate'
						}).css({
							height: self.height(),
							width: self.width()
						}));
					};
				})(el, map));

			}
		}

		sheet.click(function() {
			document.location.href = 'http://www.pokecommunity.com/showthread.php?t=320333';
		});
	});
</script>
</head>
<body>
<span id="sinnoh"></span>
</body>
</html>