Question

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

<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来克隆地图，重命名并将其分配给图像列表。

或

捕获鼠标单击坐标并确定单击与哪个图像的关系。如果它们在一排，你只需要检查一个坐标。

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

Answer 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中的链接。

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

2 个答案: