如何获取图像地图中鼠标悬停的图像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”，祝你好运（因为你将处理跨浏览器不兼容的乐趣）。