HTML圖像映射

Question

是否可以包含一個帶有圖像映射的透明框？人們會將鼠標懸停在其上以顯示可能包含內容的框？

我早就想到了這一點，但不知道該怎麼做。

Answer 1

我會說這是絕對有可能的。我可能會嘗試使用一些jQuery來獲取哪個地圖元素被徘徊，然後顯示某種跨度。

您也可以將ID設置爲特定區域，並將鼠標懸停在任意設置的背景上。 （沒有試過這個，但只是一個想法）

Answer 2

這是一個簡單的例子。這突出顯示了一個框，所以只需編輯CSS來隱藏/顯示/定位它。我使用HTML5「data-」元素來存儲用於在事件處理程序中標識相應元素的數據。

<img width="400" src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/World-map.png/800px-World-map.png" usemap="#demo" border="0"> 

<map id="map1" name="demo"> 
<area shape="rect" coords="0,0,100,100" href="#" data-element="a" /> 
</map> 

<div id="a">Info goes here</div> 

CSS：

.active { 
    border:2px solid #ff0000 
} 

JS：

$('#map1 area').on('mouseover',function() { 
    var target = $(this).data('element'); 
    $("#" + target).addClass('active'); 
}) 
$('#map1 area').on('mouseout',function() { 
    var target = $(this).data('element'); 
    $("#" + target).removeClass('active'); 
})