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


<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="";//这里改动图片路径 你可以用随机数来控制

解决方案 »

  1.   

    随机数？你没理解我的意思吧，我是要用map来指点一个图片上的某几个点显示某几个图片，不过还是谢谢你的回答！
    另外，本人有一点代码基础，但不会js，并不想了解原理，只是着急解决这样的应用，请内行最好给出具体实现例子
      

  2.   

    这里有段代码的实现效果离我的要求很近了，只是不知道怎么把那个层显示出图片，还请高手路过能稍作停留，帮我解决下燃眉之急
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>新建网页 1</title>
    <style>
    *{padding:0;margin:0}
    </style>
    </head>
    <body>
    <div id="oMenu1" style="background:#eeeeee;border:solid 0px #666666;;position:absolute;top:-1000px;left:50px;width:300px;height:200px;padding:10px;display:" >图片热区1</div>
    <div id="oMenu2" style="background:#eeeeee;border:solid 0px #666666;;position:absolute;top:-1000px;left:400px;width:300px;height:200px;padding:10px;display:">图片热区2</div>
    <img src="http://desk.blueidea.com/desk/XP/xpbz0108.jpg" width=704 height=396 border="0" usemap="#Map">
    <map name="Map">
      <area shape="rect" coords="0,0,250,396" href="###"alt="热区1" onMouseover="ShowDiv('oMenu1',this)" >
      <area shape="rect" coords="450,0,704,396" href="###"alt="热区2" onMouseover="ShowDiv('oMenu2',this)">
    </map>
    <script>
    function ShowDiv(id,obj){
    obj.onmouseout=function(e){
        if (e)
         e.stopPropagation();
        else
         window.event.cancelBubble = true;
    document.getElementById(id).style.top='-1000px';
    }
    document.getElementById(id).style.top='100px';
    document.getElementById(id).onmouseover=function(){this.style.top='100px';}
    document.getElementById(id).onmouseout=function(){this.style.top='-1000px';}
    }
    </script>
    </body>
    </html>