javascript - 鼠标悬停在 map 区域上显示图像，鼠标悬停则隐藏

Question

我有一张欧洲 map 。当我将鼠标悬停在意大利地区时，我希望显示 map 图像并在鼠标移开时消失。但是，我无法让它完美地工作。

下面是 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>

这是我的代码 http://codepen.io/w3nta1/pen/JWrmaz

Answer 1

更改了答案。

经过一番修改后，我意识到问题在于图像覆盖了 map 。解决方案是将使用 map 移至意大利图像并切换到 opacity 而不是 display。

代码如下:

请注意，我大致观察了该区域。

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