HTML:多个图像共享一张 map

Question

我有很多共享公共(public) map 的相同图像:

<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. 点击图片的位置。上面，我区分了图像中的位置，但我想知道是否有一种方法可以根据点击的图像做不同的事情？

Answer 1

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

或

捕获鼠标点击坐标并确定点击位置与哪个图像相关。如果它们排成一排，您只需检查一个坐标。

您可以使用 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)">