API tools faq
paste
Advertisement
GoGoJJTech

Sinnoh.php

GoGoJJTech
Feb 2nd, 2015
140
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 3.52 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.   <link rel="shortcut icon" href="icon.ico" type="image/x-icon"/>
  5.     <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
  6.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  7.     <title>The Sinnoh Region</title>
  8.     <style>
  9.         * {
  10.             -webkit-box-sizing: border-box;
  11.             -khtml-box-sizing: border-box;
  12.             -moz-box-sizing: border-box;
  13.             -ms-box-sizing: border-box;
  14.             -o-box-sizing: border-box;
  15.             box-sizing: border-box;
  16.             -webkit-transition: 0.5s ease-in;
  17.             -khtml-transition: 0.5s ease-in;
  18.             -moz-transition: 0.5s ease-in;
  19.             -ms-transition: 0.5s ease-in;
  20.             -o-transition: 0.5s ease-in;
  21.             transition: 0.5s ease-in;
  22.             font-family: microsoft-sans-serif;
  23.         }
  24.         #sinnoh {
  25.             cursor: pointer;
  26.         }
  27.         div, img {
  28.             margin: -2px;
  29.             position: absolute;
  30.             display: inline-block;
  31.         }
  32.         .nameplate {
  33.             padding: 50px;
  34.             text-align: center;
  35.             background: transparent;
  36.             color: transparent;
  37.             font-size: 3em;
  38.         }
  39.         .nameplate:hover {
  40.             background: rgba(169, 169, 169, .6);
  41.             color: #4B0082;
  42.         }
  43.     </style>
  44.     <script>
  45.     $(document).ready(function() {
  46.         var sinnoh = [
  47.             {
  48.                 "name": "veritylakefront",
  49.                 "realname": "Verity Lakefront",
  50.                 "x": 0,
  51.                 "y": 8,
  52.             },
  53.             {
  54.                 "name": "route201",
  55.                 "realname": "Route 201",
  56.                 "x": 1,
  57.                 "y": 8,
  58.             },
  59.             {
  60.                 "name": "twinleaftown",
  61.                 "realname": "Twinleaf Town",
  62.                 "x": 1,
  63.                 "y": 9,
  64.             },
  65.             {
  66.                 "name": "sandgemtown",
  67.                 "realname": "Sandgem Town",
  68.                 "x": 3,
  69.                 "y": 8,
  70.             },
  71.             {
  72.                 "name": "jubilifecity",
  73.                 "realname": "Jubilife City",
  74.                 "x": 2,
  75.                 "y": 5,
  76.             },
  77.             {
  78.                 "name": "route202",
  79.                 "realname": "Route 202",
  80.                 "x": 3,
  81.                 "y": 7,
  82.             },
  83.             {
  84.                 "name": "route219",
  85.                 "realname": "Route 219",
  86.                 "x": 3,
  87.                 "y": 9,
  88.             },
  89.             {
  90.                 "name": "route220",
  91.                 "realname": "Route 220",
  92.                 "x": 3,
  93.                 "y": 10,
  94.             },
  95.             {
  96.                 "name": "route204",
  97.                 "realname": "Route 204",
  98.                 "x": 3,
  99.                 "y": 3,
  100.             },
  101.             {
  102.                 "name": "route203",
  103.                 "realname": "Route 203",
  104.                 "x": 4,
  105.                 "y": 5,
  106.             },
  107.             {
  108.                 "name": "floaromatown",
  109.                 "realname": "Floaroma Town",
  110.                 "x": 3,
  111.                 "y": 1,
  112.             },
  113.             {
  114.                 "name": "route205",
  115.                 "realname": "Route 205",
  116.                 "x": 4,
  117.                 "y": 0,
  118.             },
  119.             {
  120.                 "name": "oreburghcity",
  121.                 "realname": "Oreburgh City",
  122.                 "x": 6,
  123.                 "y": 5,
  124.             }
  125.         ];
  126.  
  127.         var sheet = $('#sinnoh');
  128.         {
  129.             var m,
  130.                 x,
  131.                 y,
  132.                 el,
  133.                 img,
  134.                 nameplate,
  135.                 map;
  136.             for (var n = 0; n < sinnoh.length; n++) {
  137.                 map = sinnoh[n];
  138.                 m = map.name == 'floaromatown' ? 501.25 : 512;
  139.                 x = map.x * m;
  140.                 y = map.y * 512;
  141.                 el = $('<div>', {
  142.                     id: map.name
  143.                 }).css({
  144.                     top: y,
  145.                     left: x
  146.                 });
  147.                 img = $('<img>', {
  148.                     src: "http://gogojjtech.com/misc/map/"+map.name+".png",
  149.                     alt: map.name
  150.                 }).appendTo(el.appendTo(sheet));
  151.  
  152.                 img.load((function(par, map) {
  153.                     return function() {
  154.                         var self = $(this);
  155.                         par.append($('<div>', {
  156.                             html: map.realname,
  157.                             class: 'nameplate'
  158.                         }).css({
  159.                             height: self.height(),
  160.                             width: self.width()
  161.                         }));
  162.                     };
  163.                 })(el, map));
  164.  
  165.             }
  166.         }
  167.  
  168.         sheet.click(function() {
  169.             document.location.href = 'http://www.pokecommunity.com/showthread.php?t=320333';
  170.         });
  171.     });
  172. </script>
  173. </head>
  174. <body>
  175. <span id="sinnoh"></span>
  176. </body>
  177. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!