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 Here's my code http://codepen.io/w3nta1/pen/JWrmaz Answer Changed the answer. After tinkering a bit I realized that the problem is that the image overlays the map. The solution was to move

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

Answer

Changed the answer.

After tinkering a bit I realized that the problem is that the image overlays the map. The solution was to move the use map on to the italy image and switch to opacity instead of display.

the code became a follows:

Please note that I eyeballed the area approximately.

function show(id) {
    	document.getElementById(id).style.opacity = 1;
  	}
  	function hide(id) {
    	document.getElementById(id).style.opacity = 0;
  	}

#map01  {  position: absolute; left:342px; top:569px; opacity:0; }

<map name="Map" id="Map">
 <area onMouseOver="show('map01')" onMouseOut="hide('map01')" alt="" title="" href="#" shape="poly" coords="56,78,65,87,74,94,82,97,93,105,100,111,131,134,140,143,143,161,136,170,120,174,99,175,88,177,92,188,127,199,132,194,133,181,149,174,156,154,158,148,150,138,151,126,174,135,176,126,140,108,138,101,101,77,82,54,77,32,98,24,94,8,74,0,66,0,54,7,39,12,32,22,25,12,19,20,7,22,7,31,2,37,6,46,4,54,13,63,30,50,47,56,39,115,32,118,21,123,26,139,27,159,38,156,42,128,40,120,50,65,47,58,48,60" />
</map>
<img id="map01" src="https://image.ibb.co/bYLutv/italy.png" usemap="#Map"/>
<img src="https://image.ibb.co/hEbZtv/map.jpg" width="1000" height="816"  border="0"/>

Advertisement

Answer

Changed the answer.