如何在 Image Map Mouse Over 中获取图像的 ID

Question

假设您有两个使用相同图像映射的图像。

<img src="/test/image1.jpg" id="image1" useMap="map-name">
<img src="/test/image2.jpg" id="image2" useMap="map-name">

<map name="map-name">
  <area shape="rect" coords="0,0,82,126" alt="Sun" onmouseover="testFunction();"/>
  <area shape="circle" coords="90,58,3"  alt="Mercury" onmouseover="testFunction();"/>
  <area shape="circle" coords="124,58,8" alt="Venus" onmouseover="testFunction();"/>
</map>

有没有办法在 testFunction() 中获取图像的 ID（在本例中为 image1|image2）？

Answer 1

是的。最简单的方法是使用像 jQuery 这样的库来连接事件，而不是使用 onmouseover。如果你这样做，你基本上会做这样的事情：

$("AREA").mouseOver(function (e) {
  var id = $(e.target).attr("id");
}

如果您不这样做，那么...在您的 testFunction 定义中使用“this”，祝您好运（因为您将处理跨浏览器不兼容带来的乐趣）。