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元素。因此，JavaScript中的this引用的是#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>

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

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

1 个答案: