Question

我正在尝试使用图像映射＆＃34; imageTileMap＆＃34;来使用多个图像。

<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>

我目前遇到的问题是点击任何＆lt; area＆gt;在第一个图像上指示我朝向第二个图像的href的锚点。如何更改changeLink函数以正确收集正确的href？我很感激任何回应。

Answer 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>

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

1 个答案: