请问：map上用onmouseover弹出右侧菜单有关问题
日期：2014-05-16 浏览次数：20372 次
请教：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";}
}
问题如标题所述
<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";}
}
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
