Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <title>Untitled Document</title>
- <script type="text/javascript">
- function MM_preloadImages() { //v3.0
- var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
- var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
- if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
- }
- </script>
- <style type="text/css">
- .map {
- margin:0;
- padding:0;
- width:450px;
- height:250px;
- background:url(tj.jpg) top left no-repeat #fff;
- font-family:arial, helvetica, sans-serif;
- font-size:8pt;
- }
- #map li {
- margin:0;
- padding:0;
- list-style:none;
- }
- body {
- background-image: url(map.jpg);
- }
- #map li a {
- position:absolute;
- display:block;
- /*
- Specifying a background image
- (a 1px by 1px transparent gif)
- fixes a bug in older versions of
- IE that causeses the block to not
- render at its full dimensions.
- */
- background:url(blank.gif);
- }
- #map li a:hover span {
- position:relative;
- display:block;
- width:250px;
- left:20px;
- top:20px;
- padding:5px;
- border:1px solid #000;
- background:#fff;
- text-decoration:none;
- color:#000;
- filter:alpha(opacity=80);
- opacity:0.8;
- }
- #map a.pointA {
- top:82px;
- left:132px;
- width:40px;
- height:40px;
- }
- #map a.pointB {
- top:1px;
- left:275px;
- width:50px;
- height:50px;
- }
- #map a.snail {
- top:135px;
- left:30px;
- width:50px;
- height:50px;
- }
- #map a.pointB {
- top:192px;
- left:174px;
- width:40px;
- height:40px;
- }
- #map a.pointC {
- top:71px;
- left:297px;
- width:40px;
- height:40px;
- }
- #map li a span { display:none; }
- </style></head>
- <body class="map">
- <ul id="map">
- <li><a class="pointA" href="#" title="A"><span><b>Point A</b><br>
- 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>
- <li></li>
- <li></li>
- <li><a class="pointB" href="#" title="B"><span><b>Point B</b><br>
- 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>
- <li><a class="pointC" href="#" title="C"><span><b>Point C</b><br>
- 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>
- <li></li>
- </ul>
- <map name="Map" id="Map">
- <area shape="rect" coords="333,117,448,193" />
- </map>
- <map name="Map">
- </map>
- <map name="Map">
- </map>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement