只能在IE下玩啊.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>maptest</title>
<script type="text/javascript">
function show(v)
{
var obj=document.getElementById("divinfo");
obj.style.display='';
obj.innerHTML=v;
obj.style.left=event.clientX+20;
obj.style.top=event.clientY;
}
function hide()
{
var obj=document.getElementById("divinfo");
obj.style.display='none';
}
function showc()
{
window.status=event.clientX +":" +event.clientY;
}
</script>
</head>
<body style="margin:0px;padding:0px;">
<img id="Img1" alt="" src="http://images.cnblogs.com/cnblogs_com/guodaxia/197040/o_1.jpg" usemap="#ImageMapImageMap1" style="border-width:1px" onmousemove="showc();" />
<map id="ImageMapImageMap1">
<area shape="circle" style="background:black;" coords="100,100,100" href="#" title="圆" alt="" onmouseover="show('圆形区域');" onmouseout="hide();" />
<area shape="rect" coords="200,200,300,300" href="#" title="方的" alt="" onmouseover="show('方形区域');" onmouseout="hide();" />
<area shape="poly" coords="500,300,550,350,500,400,480,350" href="#" title="多边形" alt="" onmouseover="show('多边形');" onmouseout="hide();" />
<area shape="poly" coords="574,130,600,130,610,155,565,155" href="#" title="英山县" alt="" onmouseover="show('英山县');" onmouseout="hide();" />
<area shape="poly" coords="185,230,220,230,220,270,185,270" href="#" title="火车站" alt="" onmouseover="show('火车站');" onmouseout="hide();" />
</map>
<div id="divinfo" style="border:solid 1px black;width:100px;height:100px;text-align:center;line-height:100px;;position:absolute;display:none;background:silver;"></div>
</body>
</html>
<head>
<title>maptest</title>
<script type="text/javascript">
function show(v)
{
var obj=document.getElementById("divinfo");
obj.style.display='';
obj.innerHTML=v;
obj.style.left=event.clientX+20;
obj.style.top=event.clientY;
}
function hide()
{
var obj=document.getElementById("divinfo");
obj.style.display='none';
}
function showc()
{
window.status=event.clientX +":" +event.clientY;
}
</script>
</head>
<body style="margin:0px;padding:0px;">
<img id="Img1" alt="" src="http://images.cnblogs.com/cnblogs_com/guodaxia/197040/o_1.jpg" usemap="#ImageMapImageMap1" style="border-width:1px" onmousemove="showc();" />
<map id="ImageMapImageMap1">
<area shape="circle" style="background:black;" coords="100,100,100" href="#" title="圆" alt="" onmouseover="show('圆形区域');" onmouseout="hide();" />
<area shape="rect" coords="200,200,300,300" href="#" title="方的" alt="" onmouseover="show('方形区域');" onmouseout="hide();" />
<area shape="poly" coords="500,300,550,350,500,400,480,350" href="#" title="多边形" alt="" onmouseover="show('多边形');" onmouseout="hide();" />
<area shape="poly" coords="574,130,600,130,610,155,565,155" href="#" title="英山县" alt="" onmouseover="show('英山县');" onmouseout="hide();" />
<area shape="poly" coords="185,230,220,230,220,270,185,270" href="#" title="火车站" alt="" onmouseover="show('火车站');" onmouseout="hide();" />
</map>
<div id="divinfo" style="border:solid 1px black;width:100px;height:100px;text-align:center;line-height:100px;;position:absolute;display:none;background:silver;"></div>
</body>
</html>
