'mouseover map region to display image and mouseout to hide

I've an Europe map. When i mouse-over Italy region, i wish to display the map image and disappear when mouse-out. However, i cant make it works perfectly.

Below is the HTML 

function show(id) {
  document.getElementById(id).style.display = "block";
}

function hide(id) {
  document.getElementById(id).style.display = "none";
}
section {
  width: 1000px;
  position: relative;
  margin: 0 auto;
}

#map01 {
  position: absolute;
  left: 334px;
  top: 562px;
  display: none;
}
<img id="map01" src="images/italy.png" />
<img src="images/map.jpg" width="1000" height="816" usemap="#Map" border="0" />
<map name="Map" id="Map">
    <area shape="poly" onMouseOver="show('map01')" onMouseOut="hide('map01')" coords="339,597,334,598,338,604,335,613,345,617,346,622,353,622,357,615,366,612,378,618,382,622,387,636,394,647,406,657,421,670,427,676,438,676,441,679,450,684,456,689,457,695,467,696,472,701,475,712,478,719,474,725,474,737,478,737,486,726,486,716,492,715,491,709,485,703,480,698,484,689,489,684,496,689,503,688,504,694,510,695,509,688,502,682,490,676,482,672,472,670,468,665,473,662,460,659,449,658,441,648,438,640,432,630,422,622,416,615,410,606,414,599,410,592,419,589,428,586,428,577,428,572,415,570,411,563,402,561,393,565,386,566,385,575,376,573,369,581,366,585,361,579,357,574,353,584,344,584,338,584,340,595" href="#" />
    </map>

Here's my code http://codepen.io/w3nta1/pen/JWrmaz

javascripthtmljavascriptanimationgraphicsp5.jsflood-fill


Solution 1:[1]

This seems to fix the issue.

I took the listeners out of the html and put them into your javascript area. I also used onmouseenter and onmouseexit instead of onmousein and onmouseout though I'm not totally sure this was a necesary change.

Solution 2:[2]

Here is a working version : https://codepen.io/jonathanmarotta/pen/poarREK

(credits to Bango in his previous answer ...)

document.getElementById('poly').onmouseleave = function() {
hide('map01');
};

(Note : to generate the area(s) you need in your image, you can use any map generator like this online one for example : https://www.image-map.net/)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Bango
Solution 2

Related Questions