Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!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>
- <link rel="shortcut icon" href="icon.ico" type="image/x-icon"/>
- <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>
- * {
- -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.5s ease-in;
- -khtml-transition: 0.5s ease-in;
- -moz-transition: 0.5s ease-in;
- -ms-transition: 0.5s ease-in;
- -o-transition: 0.5s ease-in;
- transition: 0.5s ease-in;
- font-family: microsoft-sans-serif;
- }
- #sinnoh {
- cursor: pointer;
- }
- div, img {
- margin: -2px;
- position: absolute;
- display: inline-block;
- }
- .nameplate {
- padding: 50px;
- text-align: center;
- background: transparent;
- color: transparent;
- font-size: 3em;
- }
- .nameplate:hover {
- background: rgba(169, 169, 169, .6);
- color: #4B0082;
- }
- </style>
- <script>
- $(document).ready(function() {
- var sinnoh = [
- {
- "name": "veritylakefront",
- "realname": "Verity Lakefront",
- "x": 0,
- "y": 8,
- },
- {
- "name": "route201",
- "realname": "Route 201",
- "x": 1,
- "y": 8,
- },
- {
- "name": "twinleaftown",
- "realname": "Twinleaf Town",
- "x": 1,
- "y": 9,
- },
- {
- "name": "sandgemtown",
- "realname": "Sandgem Town",
- "x": 3,
- "y": 8,
- },
- {
- "name": "jubilifecity",
- "realname": "Jubilife City",
- "x": 2,
- "y": 5,
- },
- {
- "name": "route202",
- "realname": "Route 202",
- "x": 3,
- "y": 7,
- },
- {
- "name": "route219",
- "realname": "Route 219",
- "x": 3,
- "y": 9,
- },
- {
- "name": "route220",
- "realname": "Route 220",
- "x": 3,
- "y": 10,
- },
- {
- "name": "route204",
- "realname": "Route 204",
- "x": 3,
- "y": 3,
- },
- {
- "name": "route203",
- "realname": "Route 203",
- "x": 4,
- "y": 5,
- },
- {
- "name": "floaromatown",
- "realname": "Floaroma Town",
- "x": 3,
- "y": 1,
- },
- {
- "name": "route205",
- "realname": "Route 205",
- "x": 4,
- "y": 0,
- },
- {
- "name": "oreburghcity",
- "realname": "Oreburgh City",
- "x": 6,
- "y": 5,
- }
- ];
- 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: "http://gogojjtech.com/misc/map/"+map.name+".png",
- alt: map.name
- }).appendTo(el.appendTo(sheet));
- img.load((function(par, map) {
- return function() {
- var self = $(this);
- par.append($('<div>', {
- html: map.realname,
- 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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement