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

Question

如何通过使用图像映射设置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>

Answer 1

问题在于<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>

另外，如果看不到您的图像，很难知道它们可能引起什么问题。 例如，如果它们的大小不同，则可能导致您的热点停止工作。