<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>