<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">  <title>div测试</title>  
<script type="text/javascript">  
function showHide(id){
  var obj=document.getElementById(id);
  obj.style.left = event.clientX;
  obj.style.top = event.clientY;
  
  if(obj.style.display=="none") obj.style.display="block";
}
function hide(id){
  var obj=document.getElementById(id);
  if(obj.style.display=="block") obj.style.display="none";
}
</script>
<style type="text/css">  
.zhushi {  border:1px solid #CC0033;  padding:5px;  width:200px; height:260px;  color:#03c;  background:#FFFFFF;  font-size:16px;  }
</style>
</head>
<body>  
<form id="form1" runat="server">
<div id="aa" class="zhushi" style="display:none; background:red;overflow:auto; position:absolute"><a>这是我做的测试</a></div>
<IMG SRC="china.gif" WIDTH="500" HEIGHT="500" BORDER="0" ALT="" usemap="#newbook">
<map name="newbook">
<area shape="rect" coords="0,0,30,30" onmouseover=showHide('aa') onmouseout="hide('aa')">
<area shape="rect" coords="310,210,100,100" onmouseover=showHide('aa') onmouseout="hide('aa')">
<area shape="rect" coords="410,310,100,100" onmouseover=showHide('aa') onmouseout="hide('aa')">
</map>
</form>
</body>
</html>