日期:2014-05-16  浏览次数:20323 次

请教:map上用onmouseover弹出右侧菜单问题
问题如标题所述
<map name="Map">
  <area shape="rect" coords="10,10,50,20" href="#">
</map>
如何加上onmouseover,onmouseout的事件,在onmouseover时弹出右侧子菜单,onmouseout时隐藏,要求子菜单的上端与该area的上端对齐~

谢谢!~~



------解决方案--------------------
<!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 language="javascript">
function show(obj)
{
var pos=obj.coords;
pos=pos.split(",");


var menu=document.getElementById("menu");
menu.style.posLeft=parseInt(pos[2]);
menu.style.posTop=parseInt(pos[1]);
menu.style.display="inline";
}
function hide()
{
var menu=document.getElementById("menu");
menu.style.display="none";
}
</script>
</head>

<body>
<img src="1153884248242.jpg" usemap="#MapName">
<map id="smap" name="MapName" > 
<area id="a1" shape="rect" coords="50,50,100,100" href='#' onmouseover="show(this);" onmouseout="hide();" onmousemove="" style="cursor:wait"> 
<area id="a2" shape="rect" coords="200,50,250,100" href='#' onmouseover="show(this);" onmouseout="hide();" onmousemove="" style="cursor:wait"> 
</map > 
<br /><br /><br /><br /><Br />
<span id="menu" style="position:absolute;left0;top:0;display:none;z-index:1;color:blue;"><b>Menu Here</b></span>
</body>
</html>


自已找张图把那个图片换了,不然显不出来测试不到,另外如果你想显示不同的MENU自己再修改下,那个很简单的
------解决方案--------------------
把onmouseout="hide()"改成onmouseout="hide(event)"传递event去判断当前鼠标所在元素是不是在子菜单的层里。

图片层和子菜单层一定连接处一定不能有空隙,然后把hide的函数改成:

function hide(event){
event = event.target || window.event.srcElement;
if(event.id!="menu"){document.getElementById("menu").style.display="none";}
}