在多个图像上使用相同的图像映射，但每个图像上的每个区域使用不同的链接答案

【问题标题】：Using same image map on multiple images but with a different link for each area on each image在多个图像上使用相同的图像映射，但每个图像上的每个区域使用不同的链接
【发布时间】：2015-06-10 16:45:49
【问题描述】：

我正在尝试使用图像映射“imageTileMap”来使用多个图像。

<map name="imageTileMap">
    <area id="quiz"shape="circle" coords="41,193,20" href="">
    <area id="video"shape="circle" coords="112,193,20" href="">
    <area id="presentation"shape="circle" coords="184,193,20" href="">
</map>

我正在使用 Javascript，以便每个区域链接到单独页面上的锚点，该页面依赖于图像本身。我的功能是：

     <script type="text/javascript">
  function changeLink(clicked_href) {
    var url = clicked_href;  
    var areaQuiz = document.getElementById("quiz");
areaQuiz.href = url + "#quiz";

var areaVideo = document.getElementById("video");
areaVideo.href = url + "#video";

var areaPresentation = document.getElementById("presentation");
areaPresentation.href = url + "#presentation";
  }
  </script>

第一张图片本身就是这样设置的：

<a id="firstImage" href="linkedPage1.html"><img src="image1.png" usemap="#imageTileMap" onClick="changeLink(this.href)"/></a>

第二张图片格式为：

 <a id="secondImage" href="linkedPage2.html"><img src="image2.png" usemap="#imageTileMap" onClick="changeLink(this.href)"/></a>

我目前遇到的问题是，单击第一张图片上的任何都会将我引向第二张图片的 href 的锚点。如何更改 changeLink 函数以正确收集正确的 href？我很感激任何回应。

【问题讨论】：

标签： javascript html image

【解决方案1】：

一切都保持不变，，，只需更改图像代码....Href 设置为与单击时相同的页面

将第一张图片代码改为：

<a id="firstImage" href="linkedPage2.html"><img src="image1.png" usemap="#imageTileMap" onClick="changeLink(this.href)"/></a>

和第一个一样：

 <a id="secondImage" href="linkedPage1.html"><img src="image2.png" usemap="#imageTileMap" onClick="changeLink(this.href)"/></a>

【讨论】：

我可以使用这种方法，但我正在寻找一种将相同的图像映射应用于所有图像的方法。我有很多图像，因此对每个图像应用唯一的图像映射效率低下。