HTML：共享单个地图的多个图像

我有许多相同的图像，它们共享一个共同的地图：

<map name="mymap">
  <area shape="polygon" coords="0,0,64,0,32,32" href="ref1">
  <area shape="polygon" coords="64,0,64,64,32,32" href="ref2">
</map>

<img src="image.jpg" usemap="#mymap">
<img src="image.jpg" usemap="#mymap">

我希望以下链接取决于： 1.单击了哪个图像， 2.在图像中单击的位置。

---

上面，我区分了图像中的位置，但我想知道是否有一种方法可以根据单击的图像进行不同的操作？

如果给每个图像赋予一个id属性，我认为您可能可以使用一点jquery来针对每个图像的map元素，并在javascript中更改窗口的位置

类似于

$("#imgId map").click(function(){
    window.location = "http://www.google.com";
}


$("#imgId2 map").click(function(){
    window.location = "http://www.stackoverflow.com";
}

---

根据您拥有的图像数量，如果这看起来太多或太重复，可能有一种更聪明的方法可以自动处理javascript中的链接。

您可以编写一些javascript来克隆地图、重命名地图并将其分配给图像列表

或

捕获鼠标点击坐标并确定点击位置与图像的关系。如果它们在一行中，您只需要检查一个坐标

您可以使用href触发JavaScript：

<area shape="polygon" coords="0,0,64,0,32,32" href="javascript:myFunction(1)">
<area shape="polygon" coords="0,0,64,0,32,32" href="javascript:myFunction(2)">

使用JavaScript（或库），是的。对于纯html/css，不是真的，不是。我不相信图像映射是可重用的。一个事件阻止另一个。