Question

假设页面上有几个相同的图像，都与相同的地图相关联：

<img id="img1" usemap="#my-map" .... >
<img id="img2" usemap="#my-map" .... >
<img id="img3" usemap="#my-map" .... >

<map name="my-map">
  <area  .... coords=... class="foo">
  <area ....  coords=... class="bar">
</map>

每个区域都有一个鼠标悬停事件处理程序。

在那些区域鼠标悬停事件处理程序的范围内，即仅引用该区域鼠标悬停事件的本地变量，没有全局变量，是否可以知道鼠标所在的图像？是否有一些由DOM暴露的瞬态关系，因此该区域的鼠标悬停事件处理程序可以回答“此时我映射的是哪个图像？”这个问题。

请排除将处理程序直接附加到图像本身。我并不是要解决这个问题，而是试图找出该区域鼠标悬停事件处理程序中有关当前关联或“热”图像的内容，如果有的话。

由于

Answer 1

您可以使用类似的内容来查找ID。

$('area').bind('mouseover',function(e) {
    alert(e.fromElement.id); // will alert the ID of the image
});

您可以从fromElement获得更多信息，例如src，outerHTML等。您最好的选择是使用console.log（e）;并在Firefox中使用谷歌浏览器或Firebug将其转移到控制台中。

编辑这种方法充其量是变幻无常的，不应该依赖。 e中可用的内容似乎取决于您绑定的内容，以及您获得的功能（点击，鼠标悬停等）。

与多个图像关联的图像映射

1 个答案: