與多個圖像相關的圖像映射

比方說，有在頁面上幾個相同的圖像，都具有相同的地圖相關聯：與多個圖像相關的圖像映射

<img id="img1" usemap="#my-map" .... > 
<img id="img2" usemap="#my-map" .... > 
<img id="img3" usemap="#my-map" .... > 

<map name="my-map"> 
    <area .... coords=... class="foo"> 
    <area .... coords=... class="bar"> 
</map>

有上每個區域一個鼠標懸停事件處理程序。

這些區域的鼠標懸停事件處理的範圍內，FOM，即引用僅是局部區域的鼠標懸停事件中的變量，沒有全局變量，是有可能知道鼠標上的形象？是否存在由DOM暴露的瞬間關係，因此該區域的鼠標懸停事件處理程序可以回答「我現在映射哪個圖像？」這個問題。

請排除將處理程序直接附加到圖像本身。我並不是想解決這個問題，而是試圖找出在該區域的鼠標懸停事件處理程序中可以識別出當前相關或「熱」圖像的內容（如果有的話）。

謝謝

來源

2010-09-05 Tim

你可以使用這樣的東西來找到id。

$('area').bind('mouseover',function(e) { 
    alert(e.fromElement.id); // will alert the ID of the image 
});

有可以從fromElement這樣得到的SRC一噸多的信息，outerHTML等。最好的辦法是使用的console.log（E）;並通過Firefox中的Google Chrome或Firebug將其轉儲到控制檯中。

編輯這種方法是最好的，不應該依賴。 e中的可用內容似乎取決於您綁定的內容以及您獲得的功能（點擊，鼠標懸停等）。

來源

2010-09-05 23:44:27 Robert

感謝您抽出時間回覆。 e.fromElement確實會對其他情況有所幫助。我認爲document.elementFromPoint（e.clientX，e.clientY）可能會返回當前關聯的圖像，但它會返回AREA。我會繼續探討，但可能是DOM不會暴露AREA鼠標懸停事件中「熱」圖像的句柄。 – Tim 2010-09-06 13:16:45

圍繞找到relatedTarget。將回報。 – Tim 2010-09-06 13:39:31

relatedTarget似乎並不可靠，至少在IE8的初步測試中 - 它有時會指向相鄰的圖像，甚至沒有與之關聯的圖像，有時會指向包含「熱」圖像的div。 – Tim 2010-09-06 13:47:15

與多個圖像相關的圖像映射

回答

相關問題