Here is the Code

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