100分求js效果 area map热点鼠标移动上显示div 图层

想实现一个效果，图标的area map热点鼠标移动上显示div 图层，鼠标移开图层隐藏
我想实现的是只有一个div，鼠标移动在不同的热点上都显示这个div，但是位置要随鼠标位置确定
js太不熟悉了，试着修改了好几个js代码都没有成功比如：
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">  <title>div层的显示和隐藏</title>  
<script type="text/javascript">  
function showHide(id){
  var aa=document.getElementById(id);
  if(aa.style.display=="block")
      { aa.style.display="none";}
  else{
      aa.style.display="block";
}
}
</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="visibility:hidden; overflow:auto; position:absolute">这是我做的测试啦.</div>
<IMG SRC="C:/Documents and Settings/Administrator/桌面/11.jpg" WIDTH="500" HEIGHT="500" BORDER="0" ALT="" usemap="#newbook">
<map name="newbook">
<area shape="rect" coords="110,110,200,200" onmouseover=showHide('aa') onmouseout=onmouseover=showHide('aa')>
<area shape="rect" coords="310,210,100,100">
<area shape="rect" coords="410,310,100,100">
</map>
</form>
</body>
</html>

解决方案 »

  1.   

    要实现的效果图如下：http://bbs.blueidea.com/attachment.php?aid=126781&k=46b6b278960db8290aa41179f47e71c0&t=1252038156&noupdate=yes
      

  2.   


    <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);
      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">这是我做的测试啦.</div>
    <IMG SRC="images/a11.jpg" WIDTH="500" HEIGHT="500" BORDER="0" ALT="" usemap="#newbook">
    <map name="newbook">
    <area shape="rect" coords="110,110,200,200" 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>
      

  3.   

    位置根据 event.clientX event.clientY 调整<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">这是我做的测试啦.</div>
    <IMG SRC="images/a11.jpg" WIDTH="500" HEIGHT="500" BORDER="0" ALT="" usemap="#newbook">
    <map name="newbook">
    <area shape="rect" coords="110,110,200,200" 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>
      

  4.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    jQuery.fn.extend({
    TitleShow: function(strHTML) {
    var xOffset = 10;
    var yOffset = 30;
    var preview = $("#preview_container");
    if(preview.length<=0){
    $("body").append("<div id='preview_container'></div>");
    preview = $("#preview_container");
    }
    /* 在这里设置漂浮容器的样式 */
    preview.css({
    "display":"none"
    ,"position":"absolute"
    ,"width":"300px"
    });
    return this.each(function() {
    var _this = $(this);
    _this.hover(
    function(e){
    preview.html(strHTML);
    preview
    .css("top",(e.pageY - xOffset) + "px")
    .css("left",(e.pageX + yOffset) + "px")
    .css("opaticy",0)
    .show()
    .stop()
    .animate({"opacity":0.9},300);

    },function(){
    preview
    .stop()
    .animate({"opacity":0},300,function(){
    $(this).hide();
    });
    }
    )
    _this.mousemove(function(e){
    preview
    .css("top",(e.pageY - xOffset) + "px")
    .css("left",(e.pageX + yOffset) + "px");
    }); 
    });
    }
    }); 

    $("#img_g1").TitleShow("<div class='floatdiv'>第一个g </div>");
    $("#img_o1").TitleShow("<div class='floatdiv'>第一个o </div>");
    $("#img_o2").TitleShow("<div class='floatdiv'>第二个o </div>");
    $("#img_g2").TitleShow("<div class='floatdiv'>第二个g </div>");
    $("#img_l").TitleShow("<div class='floatdiv'>字符l</div>");
    $("#img_e").TitleShow("<div class='floatdiv'>字符e</div>");
    $("#img_z").TitleShow("<div class='floatdiv'>中文谷歌</div>");
    });
    </script>
    <style type="text/css">
    .floatdiv{
    color:#fff;
    font-size:14px;
    font-weight:bold;
    width:80px;
    height:20px;
    background-color:#99CCFF;
    border:#0099FF 2px solid;
    }
    </style>
    </head><body>
    <img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" width="276" height="110" border="none" usemap="#Map">
    <map name="Map" id="Map">
    <area id="img_g1" shape="rect" coords="6,7,66,84" href="#" />
        <area id="img_o1" shape="rect" coords="72,27,113,77" href="#" />
        <area id="img_o2" shape="rect" coords="121,27,159,76" href="#" />
        <area id="img_g2" shape="rect" coords="164,25,201,103" href="#" />
        <area id="img_l" shape="rect" coords="204,6,224,73" href="#" />
        <area id="img_e" shape="rect" coords="229,26,265,74" href="#" />
        <area id="img_z" shape="rect" coords="208,78,255,98" href="#" />
    </map>
    </body>
    </html>