Pastebin launched a little side project called VERYVIRAL.com, check it out ;-) Want more features on Pastebin? Sign Up, it's FREE!
Guest

Here is the Code

By: a guest on Jun 15th, 2012  |  syntax: None  |  size: 3.17 KB  |  views: 129  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  4. <title>Untitled Document</title>
  5. <script type="text/javascript">
  6. function MM_preloadImages() { //v3.0
  7.   var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
  8.     var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
  9.     if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
  10. }
  11. </script>
  12. <style type="text/css">
  13. .map {
  14.        
  15.        
  16.  
  17.    
  18.         margin:0;
  19.         padding:0;
  20.         width:450px;
  21.         height:250px;
  22.         background:url(tj.jpg) top left no-repeat #fff;
  23.         font-family:arial, helvetica, sans-serif;
  24.         font-size:8pt;
  25.    
  26.  
  27.  
  28. }
  29.  
  30.  
  31.  
  32.     #map li {
  33.         margin:0;
  34.         padding:0;
  35.         list-style:none;
  36.     }
  37.  
  38.  
  39. body {
  40.         background-image: url(map.jpg);
  41. }
  42.  
  43.  
  44.     #map li a {
  45.         position:absolute;
  46.         display:block;
  47.         /*
  48.            Specifying a background image
  49.            (a 1px by 1px transparent gif)
  50.            fixes a bug in older versions of
  51.            IE that causeses the block to not
  52.            render at its full dimensions.
  53.         */
  54.         background:url(blank.gif);
  55.     }
  56.        
  57.        
  58. #map li a:hover span {
  59.     position:relative;
  60.     display:block;
  61.     width:250px;
  62.     left:20px;
  63.     top:20px;
  64.     padding:5px;
  65.     border:1px solid #000;
  66.     background:#fff;
  67.     text-decoration:none;
  68.     color:#000;
  69.     filter:alpha(opacity=80);
  70.     opacity:0.8;
  71. }
  72.  
  73.  
  74.     #map a.pointA {
  75.         top:82px;
  76.         left:132px;
  77.         width:40px;
  78.         height:40px;
  79.     }
  80.            
  81.     #map a.pointB {
  82.         top:1px;
  83.         left:275px;
  84.         width:50px;
  85.         height:50px;
  86.     }
  87.            
  88.     #map a.snail {
  89.         top:135px;
  90.         left:30px;
  91.         width:50px;
  92.         height:50px;
  93.     }
  94.            
  95.     #map a.pointB {
  96.         top:192px;
  97.         left:174px;
  98.         width:40px;
  99.         height:40px;
  100.     }
  101.            
  102.     #map a.pointC {
  103.         top:71px;
  104.         left:297px;
  105.         width:40px;
  106.         height:40px;
  107.     }
  108.  
  109.  
  110.  
  111. #map li a span { display:none; }
  112. </style></head>
  113.  
  114.  
  115.  
  116.  
  117.  
  118.  
  119.  
  120. <body class="map">
  121.  
  122.  
  123.     <ul id="map">
  124.         <li><a class="pointA" href="#" title="A"><span><b>Point A</b><br>
  125.            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</span></a></li>
  126.      
  127.         <li></li>
  128.            
  129.         <li></li>
  130.            
  131.         <li><a class="pointB" href="#" title="B"><span><b>Point B</b><br>
  132.             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
  133.             </span></a></li>
  134.            
  135.         <li><a class="pointC" href="#" title="C"><span><b>Point C</b><br>
  136.             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</span></a></li>
  137.         <li></li>
  138. </ul>
  139.  
  140.  
  141.  
  142. <map name="Map" id="Map">
  143.   <area shape="rect" coords="333,117,448,193" />
  144. </map>
  145. <map name="Map">
  146. </map>
  147. <map name="Map">
  148. </map>
  149. </body>
  150. </html>