// Javascript Code
function hovers(isover, y,x,w,h,m){
if(isover){
// showing div in position
$("#odiv").css({top:x+'px', left:y+'px', width:w+'px',height:h+'px',
opacity:1}).show().click(function (){
window.open(m,"Jordan Map");
});
} else {
// hiding this div.
$("#odiv").hide().unbind('click');
}
}
// HTML Code
<img src="jordanmap.jpeg" width="800" height="991" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="132,227,297,460" href="map1.jpg" target="_blank"
alt="North of Jordan" onmouseover="hovers(true, 132,227,165,233,'map1.jpg')" />
<area shape="rect" coords="120,416,285,628" href="map2.jpg" target="_blank"
alt="Middle of Jordan" onmouseover="hovers(true, 120,416,165,212,'map2.jpg')" />
<area shape="rect" coords="111,574,270,795" href="map3.jpg" target="_blank"
alt="Middle of Jordan" onmouseover="hovers(true, 111,574,159,221,'map3.jpg')" />
<area shape="rect" coords="50,685,200,888" href="map4.jpg" target="_blank"
alt="South of Jordan" onmouseover="hovers(true, 50,685,150,203,'map4.jpg')" />
<area shape="rect" coords="20,262,159,450" href="map5.jpg" target="_blank"
alt="North of Israel" onmouseover="hovers(true, 20,262,139,188,'map5.jpg')" />
<area shape="rect" coords="18,406,132,556" href="map6.jpg" target="_blank"
alt="Middle of Israel" onmouseover="hovers(true, 18,406,114,150,'map6.jpg')" />
<area shape="rect" coords="17,544,123,744" href="map7.jpg" target="_blank"
alt="South of Israel" onmouseover="hovers(true, 17,544,106,200,'map7.jpg')" />
</map>
