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

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 是否暴露了一些暂时的关系，因此该区域的 mouseover 事件处理程序可以回答“我此时正在映射哪个图像？”的问题

请排除将处理程序直接附加到图像本身。我不是试图解决问题，而是试图找出在该区域的 mouseover 事件处理程序中可以知道的关于当前关联或“热”图像的内容。

谢谢

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 中使用 Google Chrome 或 Firebug 浏览它转储到控制台的内容。

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