使用相同圖像映射的多個圖像 - 如何在點擊時返回正確的圖像參考？

Question

我在一個頁面上有多個圖像，全部使用相同的圖像映射。我需要知道用戶點擊了什麼圖片。麻煩的是$（this）返回對<area>的引用，而不是<img>。下面的代碼：

<img src="image.png" usemap="#imageMap"/> 
<img src="image.png" usemap="#imageMap"/> 
<img src="image.png" usemap="#imageMap"/> 

<map name="imageMap"> 
    <area shape="rect" coords="0,0,27,12" href="javascript:;" onclick="up($(this));"> 
    <area shape="rect" coords="0,13,27,25" href="javascript:;" onclick="down($(this));"> 
</map> 

我怎麼知道在up和down功能，這是點擊的形象？

Answer 1

只有一個地圖

如果您希望本作的area多個實例，每個img，你會失望。無論您申請map多少img，它仍然只是相同的一個map與裏面相同的2 area。所以使用$(this)裏面的onclick不會有太大的幫助。

你真正需要

是當前img的index被點擊的area時;這很容易得到。

jQuery的

var n;//index of current image 
$(document).ready(function() {//on ready 
    $('img').each(function(i) {//get index 
     $(this).hover(function() {//and on hover 
      n = i;//set index 
     }); 
    }); 
}); 

現在意味着你onclick，現在可以只up()或down()因爲使用$(this)不返回當前圖像。

Made a fiddle其中突出顯示當前圖像，以便您可以瞭解它是如何工作的。