如何在图像区域地图中分配 HTML onmouseover 事件处理程序？

Jase 发表于 Dev

杰斯

如何通过使用图像映射设置 onmouseover 事件处理程序。我希望有一个图像，当用户将鼠标悬停在图像的某个部分（通过地图坐标设置）时，另一个图像应该显示在指定坐标上下文中的初始图像之上。这是我到目前为止所拥有的，但它不起作用：

<center>
<p><img src="main.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
    <area alt="" title="" href="http://google.com" shape="poly" coords="190,187,163,186,161,139,188,141" onmouseover="this.src='change-face-one.jpg';" />
    <area alt="" title="" href="http://example.com" shape="poly" coords="203,120,202,158,232,159,232,124" onmouseover="this.src='change-face-two.jpg';" />
</map>
</center>

布莱斯豪威森

问题在于它<map>是一个 DOM 元素。因此this在 javascript 中引用的是 #map 而不是图像。

尝试给图像一个 ID 并引用它。

<center>
<p><img src="main.jpg" alt="" id="theImage" usemap="#Map" />
<map name="Map" id="Map">
    <area alt="" title="" href="http://google.com" shape="poly" coords="190,187,163,186,161,139,188,141" onmouseover="document.getElementByID('theImage').src='change-face-one.jpg';" />
    <area alt="" title="" href="http://example.com" shape="poly" coords="203,120,202,158,232,159,232,124" onmouseover="document.getElementByID('theImage').src='change-face-two.jpg';" />
</map>
</center>

此外，如果没有看到您的图像，很难知道它们可能导致什么问题（如果有的话）。例如，如果它们的大小不同，它们可能会导致您的热点停止工作。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。