如何通过map热点实现鼠标点击出现小图片（类似hint）的效果

这里有个例子是实现点击出现小图片提示效果的
http://www.webjx.com/htmldata/2007-05-06/1178462171.html
这个例子中点击哪里出来的都是同一个小图片，我想要实现谈出不同图片的效果

解决方案 »

  1.   


    <html>
    <head>
    <script language="JavaScript">
    //from webjx.com
    function point_it(event){
        pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("pointer_div").offsetLeft;
        pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("pointer_div").offsetTop;
        document.getElementById("cross").style.left = (pos_x-1) ;
        document.getElementById("cross").style.top = (pos_y-15) ;
        document.getElementById("cross").style.visibility = "visible" ;
        document.getElementById("cross").src="";//这里改动图片路径 你可以用随机数来控制
        document.pointform.form_x.value = pos_x;
        document.pointform.form_y.value = pos_y;
    }
    </script>
    </head>
    <body>
    <form name="pointform" method="post">
    <div id="pointer_div" onclick="point_it(event)" style = "background-image:url('http://www.webjx.com/upfiles/20070504/20070504003546_01.jpg');width:500px;height:333px;">
    <img src="/images/logo.gif" id="cross" style="position:relative;visibility:hidden;z-index:2;"></div>
    You pointed on x = <input type="text" name="form_x" size="4" /> - y = <input type="text" name="form_y" size="4" />
    </form> 
    </body>
    </html> document.getElementById("cross").src="";//这里改动图片路径 你可以用随机数来控制
      

  2.   

    根据获得的PosX和PosY动态指定src的值就是了..
    用if(){src=""}else{src=""}
    document.getElementById("cross").src="";//这里改动图片路径 你可以用随机数来控制