javascript 悬浮菜单

在一张图片中定义了几个热点区域，当鼠标放到不同的热点 区域后，会在其热点区域的右边弹出一个菜单，上面有两个链接。而且要求菜单随着鼠标在热点右方移动
请问这样的javascript代码如何写？
谢谢了

解决方案 »

  1.   

    现在javascript获得坐标的方法已经得到了：<script type="text/javascript">
    function mousePos(e){
    var posx = 0;
    var posy = 0;
    if (!e) var e = window.event;
    if (e.pageX || e.pageY)  {
    posx = e.pageX;
    posy = e.pageY;
    }
    else if (e.clientX || e.clientY){
    posx = e.clientX + document.body.scrollLeft
    + document.documentElement.scrollLeft;
    posy = e.clientY + document.body.scrollTop 
    + document.documentElement.scrollTop;
    }
    }
    </script>
      

  2.   

    http://blog.csdn.net/wtcsy/archive/2009/06/29/4305684.aspx
    和这个很像
    把随鼠标移动的 那部分代码去掉就好了
      

  3.   

    谢谢，不过如何保证当我向 悬浮菜单移动时如何使这个悬浮菜单静止，从而可以使我可以点击菜单中的link是一个难点
      

  4.   

    菜单随着鼠标在热点右方移动
    这个比较好
    控件它的方向<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    //向左
    var curLeft = "left";
    //每次移动的步数
    var start = 10;
    function show() {
    //当前的left
    var cur = document.getElementById("adv").style.pixelLeft;
    //最大left
        var maxLeft = document.body.offsetWidth - document.getElementById("adv").offsetWidth;
        if (cur <= 0) {
    curLeft = "right";
        } else if (cur >= maxLeft) {
    curLeft = "left";
        }     if (curLeft == "left") {
    cur = cur - start;
        } else if (curLeft == "right") {
    cur = cur + start;
        }
    document.getElementById("adv").style.pixelLeft = cur;
    setTimeout("show()",100); }
    //-->
    </SCRIPT>
     </HEAD> <BODY onLoad="show()">
      <div id="adv" style="position:absolute;left:200px;">
      8879898
      </div>
     </BODY>
    </HTML>
      

  5.   

    其实就是鼠标移上去的时候，生成个div，然后div获取id用ajax获取信息，将信息显示在div中，当鼠标移开时隐藏div
      

  6.   

    <body>
    <img src="../images/right_qlgk.jpg" alt="权力公开" id="button_div1"
    usemap="#Map" />
    <map name="Map" id="Map">
    <area shape="rect" coords="80,15,175,50" href="#" />
    <area shape="rect" coords="190,15,285,50" href="#" />
    <area shape="rect" coords="300,15,395,50" href="#" />
    <area shape="rect" coords="410,15,505,50" href="#" />
    <!-- 要显示的菜单 根据需要可以动态赋值 和 设置好看的样式-->
    <table id="menu" style="top:0px;left:0px;width:200;height:40;display:none;border:1px;border-style:solid;">
    <tr><td><a href="http://hi.csdn.net/headsen">headsen</a></td></tr>
    <tr><td><a href="http://hi.csdn.net/headsen">我的博客</a></td></tr>
    </table>
    </map>
    </body>
    <script type="text/javascript">
    var area = document.all.Map.areas;
    for(var i=0;i<area.length;i++){
      area[i].onmouseover=show;
      area[i].onmouseout=hidden;
    }
    document.getElementById("menu").onmouseout=hidden;
    var menu =  document.getElementById("menu");
    function show(e){
      menu.style.left=e.screenX;//.clientX;//.pageX;
      menu.style.top=e.screenY;//clientY;//e.pageX;
      menu.style.display="block";
    }
    function hidden(){
    //alert(document.activeElement);
       if("menu获取焦点") return; 
       menu.style.display="none";
    } </script>没怎么搞过页面这些东西，一直交给美工！果然折腾了半天没搞定！
    楼主自己折腾吧！
      

  7.   

    首先把要展示的信息隐藏，并posiable:absolute,创建mouseover和mouseout事件<script type="text/javascript">
    function showTip(oEvent){
      if(new checkBroswer().isIE)[code=JScript]
         oEvent = window.event;
       var oDiv = document.getElementById("div2Tip");
       oDiv.style.visibility="visible";
       oDiv.style.left=oEvent.clientX+5;
       oDiv.style.top=oEvent.clientY+5;
     } function hideTip(oEvent){
       var oDivTip = document.getElementById("div2Tip");
       oDivTip.style.visibility="hidden";
     }
    </script>  
    </head>
    <body>
    <div id="div1">click me</div>
    <input type="button" value="change" onclick="useMethod()"/>
    <div id="div2" style="background-color:red;width:100px;height:100px;" onmouseover="showTip(event)" onmouseout="hideTip(event)"></div>
    <div id="div2Tip" style="background-color:yellow;position:absolute; visibility:hidden;padding:5px">
      <span style="font-weight:bold">hello this is a ToolTip</span></br>
      more details can go here.......
    </div></body>
    </html>[/code]
      

  8.   


    对大家的回答我都认真看了，但是我现在还是无法解决我的问题，这里放上图，和大家讨论下
    大家可以看到，在这个图中有23个柱形，分别代表了不同的信息。
    我现在已经为这23个区域用了热点划分了不同的区域，如： <area shape="rect" coords="119,13,160,140"〉
    我要求就是在鼠标放在这几个不同区域会自动弹出一个菜单，并且可以随鼠标在柱形上下移动而在右边上下移动，当我们向右边靠近我们的菜单时，可以使得这个菜单静止，从而可以可以点击这个菜单中的不同链接。
      

  9.   

    在这个菜单中，要求在链接中比如： 
    <a href = "www.home-kaoyan.com/chromosome?page=1" >link1</a>
    <a href = "www.home-kaoyan.com/chromosomoe?page=2">link</a>
    就是链接带上所在柱形下边的数目