Question

使用图像地图，我正在尝试构建一个图形，当您点击“翼”时，它会使它看起来像一个按钮并压下它。

图像映射已构建，onclick正在运行，但没有任何反应？

这是代码：

<!DOCTYPE html>
<html>
<head></head>
<body>
 <map name="location-map" style="cursor:pointer;">
  <area id="spot_1" onClick="set_spot(this.id)" shape="poly" coords="66,78,122,38,194,15,186,106,174,112,160,118" />
 </map>
 <img src="PH.png" usemap="#location-map" id="spot_1" style="position:absolute;top:0px;left:0px;width:402px;height:302px;" />

 <script type="text/javascript">
  function set_spot(mouse_over_name) {
    document.getElementById(mouse_over_name).style.display="none";
  };
 </script>

</body>
</html>

应该隐藏图像吗？

我见过其他解决方案，说JavaScript的位置需要在元素之后。我已经在每个位置尝试过该脚本，并且出来的总是一样的。没变。我也尝试将宽度更改为0像素并将图像src更改为“”！我也有DIV内部的图像并尝试隐藏DIV，但又没有？

如果我发出警报：在变更之前alert(document.getElementById(mouse_over_name).style.display)，在我得到“无”之后，我得到一个空白警告框。

我错过了什么？

您可以在此处查看上述代码： http://www.beaconfasteners.net/beacon_advantage/graph/test.html

修改我在所有主流浏览器中都试过这个。

Answer 1

Robby Cornelissen是对的。你的img没有隐藏的原因是因为onclick使用了area元素的id而你正在设置display：none，而不是img元素。我不确定是否有办法隐藏区域元素的内容，但您可能会使用它来查找和隐藏与单击区域共享相同ID的图像元素：

function set_spot(mouse_over_name) { 
    [].forEach.call(document.querySelectorAll('img'), function(el) {
       if (el.id === mouse_over_name) {
           el.style.display = 'none';
       };
    });
};

这将遍历页面上的所有图像，因此我无法保证这种解决方案的速度。你可以在这里预览：

jsfiddle

Javascript DOM更改无效

1 个答案: