Using JS to keep a rollover image open until mouse leaves maps outer container

Question

The map on this page http://www.marktoe.co.za/dev/agrimark/takke is using hotspots, however I would like to have it that when you hover over a province and the enlarged image appears, that it only disappears once the mouse leaves the enlarged images bounding box. Currently it closes when moving out of the hotspot below the enlarged image and also the other hotspots are being found in the background if one hovers around the large image causing confusion. The code Ive been trying

<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>

Thank you, however I feel I was very specific and concise with my question - have edited to a simpler version since and included the code in page. I really need to get this working, yesterday :( — ZADorkMan, May 18 '15 at 14:19

Sarfaraaz · Answer 1 · 2015-05-18T08:34:51.573

0

I would recommend setting a function to the onmouseout event of the container div.

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

or you could add it dynamically in javascript.

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

you can remove the event listener of your lower map if you want

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

Note: I am using my own variable and element names.

and create a javascript function to handle it. the onmouseout event occurs when the mouse leaves the element.

Tip: The onmouseleave event is similar to the onmouseout event. The only difference is is that the onmouseleave event does not bubble (does not propagate up the document hierarchy). See "More Examples" at the bottom of this page to better understand the differences.

you could set a variable to false with that event and base your showEnlargedImage on that variable

var onMap = null;
function MapContainer_MouseOut()
{
    onMap = false;
}

function MapContainer_MouseEnter()
{
    onMap = true;
}

function showEnlargeImage()
{
    if(onMap === true)
    {
     //show image enlarged code
    }
}

edited May 18 '15 at 08:34

answered May 18 '15 at 08:20

Sarfaraaz

488
6
17

hmmm the question changed after I answered it. still trying to figure out exactly what you need help on though. @Radonirina Maminiaina .EDIT: OK i think I know what you are asking. the enlarged view covers the original map so you need it to only remove the enlarged image when the mouse leaves the enlarged image box and not the province/state area underneath it. Am i correct in assuming this? – Sarfaraaz May 18 '15 at 08:24
Sarfaraaz - yes that sounds correct - when you hover the province the enlarge view shows then I would like that to stay visible until the mouse moves out of the enlarged view - trying the solution above quickly too and will advise shortly - thank you for the time guys! – ZADorkMan May 18 '15 at 08:33
Ok - I tried this http://pastebin.com/NrBNTwKb but still no go. I'm missing something simple I think. Any suggestions? – ZADorkMan May 18 '15 at 08:57
can't just copy paste my code. you have to integrate it with the existing code. on your MM_swapImageRestore function you need to add an if to only restore when onMap === false @user3206244 – Sarfaraaz May 18 '15 at 09:11
Thank you, I am trying but I am our of my depth I think, with my limited JS knowledge its hard to tell the difference between variables and JS actual functions. Still learning. I really need to get this sorted this morning so any further assistance would be greatly appreciated! – ZADorkMan May 18 '15 at 09:31
Here is where I am - http://pastebin.com/i9EcvDLf - please could someone help walk me through this.. I promise Ill go do a JS course soon! hehe – ZADorkMan May 18 '15 at 09:51
change your function MM_swapImageRestore that is right at the top to : function MM_swapImgRestore() { //v3.0 if(onMap === false){var i,x,a=document.MM_sr; for(i=0;a&&i – Sarfaraaz May 18 '15 at 10:10
ok Ive added it to each provinces code - like this http://pastebin.com/ET1hhUdL - the enlarge view stays open now except that the hotspots behind the enlarged image are still picked up so the image source changes when hovering over the enlarged image in an area that has another province hotspot behind it – ZADorkMan May 18 '15 at 10:18
need to remove the event listener on the original map then add it back later. will have a look later – Sarfaraaz May 18 '15 at 10:40
This is what I am struggling with - going to pull my hair out soon http://pastebin.com/t9WgS3hP - plsssss can anyone assist? – ZADorkMan May 18 '15 at 12:28
So there's no way to merely resize the area of the hover hotspot so that when the mouse moves out of that it switches back to the original state of the image? – ZADorkMan May 18 '15 at 13:01

Using JS to keep a rollover image open until mouse leaves maps outer container

1 Answers1