在多個圖像上使用相同的圖像映射，但每個圖像上的每個區域使用不同的鏈接

我試圖使用圖像映射「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？我很感激任何迴應。

來源

2015-06-10 Nathan Jones

一切都保持相同的,,,只要改變圖像的代碼.... HREF設定爲從它按下

更改第一圖像代碼到同一頁：

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

do同第一：

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

來源

2015-06-10 16:52:56 TeamKhurram

我可以使用這種方法，但我正在尋找一種方法將相同的圖像映射應用於所有圖像。我有很多圖像，因此將獨特的圖像映射到每個圖像效率不高。 –

@NathanJones試試上面的代碼...現在 – TeamKhurram

在多個圖像上使用相同的圖像映射，但每個圖像上的每個區域使用不同的鏈接

回答

相關問題