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

Question

假设页面上有多个相同的图像，所有图像都与同一张 map 关联:

<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>

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

在这些区域鼠标悬停事件处理程序的范围内，即仅引用区域鼠标悬停事件本地的变量，没有全局变量，是否可以知道鼠标位于哪个图像上？ DOM 是否公开了一些 transient 关系，因此该区域的鼠标悬停事件处理程序可以回答“我此时正在映射哪个图像？”的问题

请排除将处理程序直接附加到图像本身的可能性。我并不是想解决问题，而是想找出在该区域的鼠标悬停事件处理程序中可以了解有关当前关联或“热门”图像的内容(如果有的话)。

谢谢

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);并使用 Google Chrome 或 Firefox 中的 Firebug 查看它转储到控制台的内容。

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