使用JS保持翻转图像打开，直到鼠标离开映射的外部容器

Question

此页面上的地图http://www.marktoe.co.za/dev/agrimark/takke正在使用热点，但我想有它，当你悬停在一个省和放大的图像出现，它只消失一旦鼠标离开放大的图像边界框。目前，当移动到放大图像下方的热点时，它会关闭，如果在大图周围徘徊，也会在背景中发现其他热点，这会造成混乱。我一直在尝试的代码

<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<script type="text/javascript">
function big ()  {
var onMap = document.getElementById("enlargedView");
onMap.style.color= "red";}
onMap.removeEventListener("MouseOver" , enlargedView_MouseOver);
</script>
<script type="text/javascript">
var onMap = null;
function MapContainer_MouseOut()
{
onMap = false;
}
function MapContainer_MouseEnter()
{
onMap = true;
}
function showEnlargeImage()
{
if(onMap === true)
{
 //show image enlarged code
}
}
</script>
<div id="enlargedView" style="text-align:center;"><img src="/dev/agrimark/templates/jwd25template/images/map-blank.png" alt="wc" name="map" width="700" height="400" usemap="#mapMap" id="map" border="0" >testing
<p onclick="big()">Try it</p>
<map name="mapMap">
<area shape="poly" class="WC" coords="232,299,237,309,240,314,243,324,243,333,242,340,238,342,233,342,233,346,237,348,240,352,243,359,245,360,247,363,250,371,246,374,244,378,245,379,253,373,254,375,256,378,256,380,261,382,261,381,267,384,270,387,273,389,276,390,277,390,280,390,288,386,289,383,294,381,299,380,304,379,307,379,308,380,311,380,315,378,318,378,321,378,323,376,326,374,331,372,338,370,343,370,348,372,350,372,356,372,359,370,360,369,356,366,353,363,355,358,357,358,355,355,350,354,349,354,343,355,340,352,340,348,342,344,345,339,350,337,353,332,353,327,358,325,363,324,371,323,374,316,373,312,368,309,367,310,361,308,356,311,351,315,347,317,343,315,338,313,332,310,328,307,327,314,326,318,324,322,322,324,315,324,310,327,307,330,305,334,304,335,301,337,298,339,295,341,292,341,289,341,284,339,281,334,281,329,284,325,284,324,278,328,272,331,270,334,270,335,267,327,270,321,267,319,265,317,258,315,258,310,257,302,256,296,256,292,255,286,247,281,240,280,241,285,234,287,232,293,230,296,230,296" href="takke/western-cape" target="_parent" alt="WC" onMouseOut="MM_swapImgRestore() { //v3.0 if(onMap === false){var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;} }" onMouseOver="MM_swapImage('map','','/dev/agrimark/templates/jwd25template/images/map-WC-2.png',1)"   >
<area shape="poly" class="NA" coords="111,9,130,3,143,7,159,14,170,19,230,17,241,16,255,19,291,31,297,27,311,30,319,30,340,20,351,16,371,15,382,18,386,22,375,28,358,36,342,39,324,40,304,39,298,45,300,52,300,56,300,75,300,94,302,103,302,107,286,109,280,118,280,129,280,138,277,169,277,180,280,201,281,212,278,228,278,234,261,240,255,245,239,244,229,240,217,232,212,233,201,240,187,228,174,214,168,190,166,170,163,157,162,131,158,105,153,89,143,71,134,60,124,47,113,31,105,15,108,7,109,7" href="takke/namibia" onMouseOut="MM_swapImgRestore() { //v3.0 if(onMap === false){var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;} }" onMouseOver="MM_swapImage('map','','/dev/agrimark/templates/jwd25template/images/map-NA-2.png',1)" target="_parent" alt="NA">
<area shape="poly" class="EC" coords="347,353,347,345,353,340,357,339,355,331,363,328,372,328,377,318,375,312,382,308,392,301,402,297,404,292,404,285,415,281,423,283,428,285,438,284,444,278,453,285,461,285,470,274,474,272,484,269,476,277,479,281,487,282,493,285,502,288,507,292,505,299,495,305,489,311,482,317,472,326,465,334,457,341,445,351,432,359,418,365,410,363,407,365,407,369,407,371,404,373,397,370,394,370,392,372,387,375,379,374,371,372,365,372,361,369,359,364,364,361,361,355,355,352,349,352,349,352,347,352" href="takke/eastern-cape" onMouseOut="MM_swapImgRestore() { //v3.0 if(onMap === false){var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;} }" onMouseOver="MM_swapImage('map','','/dev/agrimark/templates/jwd25template/images/map-EC-2.png',1)" target="_parent" alt="EC">
<area shape="poly" class="MP" coords="549,115,541,117,542,125,544,132,540,135,538,138,534,133,530,128,524,125,518,129,509,128,506,138,503,141,494,142,490,135,479,136,471,140,473,143,481,142,481,148,487,145,490,147,487,152,486,154,484,158,479,162,474,164,473,167,477,172,479,174,472,178,466,183,470,187,480,190,486,192,489,194,493,199,496,202,497,203,507,199,515,198,526,199,533,200,528,196,526,189,525,184,525,174,528,168,532,162,538,159,546,161,550,164,553,165,553,147,553,138,552,127,551,117,549,113" href="takke/mpumalanga" onMouseOut="MM_swapImgRestore() { //v3.0 if(onMap === false){var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;} }" onMouseOver="MM_swapImage('map','','/dev/agrimark/templates/jwd25template/images/map-MP-2.png',1)" target="_parent" alt="MP">
<area shape="poly" class="NC" coords="305,188,323,181,335,172,337,169,341,179,347,184,346,190,358,201,363,202,370,199,371,208,376,208,380,216,383,214,386,205,389,211,390,216,391,221,386,233,384,239,379,252,380,260,385,267,394,277,398,281,400,286,400,292,392,298,385,301,381,303,378,307,375,309,367,307,354,308,350,309,346,314,341,313,335,308,326,311,325,316,324,320,317,321,306,326,302,329,299,333,296,337,295,338,289,336,287,330,289,324,281,322,277,325,274,327,272,321,270,316,260,307,260,306,259,291,258,287,257,285,251,281,249,278,245,276,238,280,232,284,231,290,229,293,223,282,220,276,219,270,214,258,213,254,209,249,206,240,215,236,225,241,235,246,244,248,256,249,264,245,272,241,277,237,281,231,284,218,283,206,280,186,280,165,281,141,285,143,289,154,292,161,294,166,291,176,291,183,294,186,305,188,284,235" href="takke/noord-kaap" onMouseOut="MM_swapImgRestore() { //v3.0 if(onMap === false){var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;} }" onMouseOver="MM_swapImage('map','','/dev/agrimark/templates/jwd25template/images/map-NC-2.png',1)" target="_parent" alt="NC">
 </map>
</div>

Answer 1

我建议为容器div的onmouseout事件设置一个函数。

<div id='enlargedView' onmouseout='enlargedView_MouseOut(this)'>

或者你可以在javascript中动态添加。

enlargedView.addEventListener("MouseOut", enlargeView_MouseOut);//2cnd argument is a function 

如果需要，可以删除下层映射的事件侦听器

var fullMap = document.getElementById("FullMap");
fullMap.removeEventListener("MouseOver" , FullMap_MouseOver);

注意:我使用自己的变量名和元素名。

，并创建一个javascript函数来处理它。onmouseout事件在鼠标离开元素时发生。

提示: onmouseleave事件类似于onmouseout事件。的唯一的区别是onmouseleave事件不会冒泡(不会沿文档层次结构向上传播)。参见"更多示例"这个页面的底部可以更好地理解它们的区别。

您可以将该事件的变量设置为false并基于该变量

var onMap = null;
function MapContainer_MouseOut()
{
    onMap = false;
}
function MapContainer_MouseEnter()
{
    onMap = true;
}
function showEnlargeImage()
{
    if(onMap === true)
    {
     //show image enlarged code
    }
}