HTML：多个图像共享一个地图

问题描述：

我有很多共享一个共同的地图图像相同的：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.点击图像中的哪个位置。上面我区分了图像中的位置，但是我想知道是否有办法根据点击哪个图像来做不同的事情？

使用JavaScript（或库），是的。用纯html/css，不是真的，不是。 – 2011-03-23 19:40:00

我不相信图像映射是可重用的。 – drudge 2011-03-23 19:41:25

答

您可以编写一些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)">

答

如果你给每个图像一个id属性，我想你可能会使用一点点jquery来定位每个图像的地图元素并在javascript中改变窗口的位置。

东西沿着

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


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

取决于你拥有的图像数量的线，如果这似乎是一个地段或过于重复，有可能是能够处理JavaScript中的链接一个更聪明的方法自动。

一个事件阻止另一个事件。 – 2011-03-23 19:57:26

HTML：多个图像共享一个地图

相关推荐