HTML/Javascript覆蓋區域上的圖像Mouseovers

Question

因此，我有一個圖像在一個頁面和一個圖像對應的圖像，然後我也有兩個相應的圖像，每個大小相同的第一個（大多數是透明的），我想當圖像地圖的某個區域被掩蓋時覆蓋到該圖像上。我將如何去做，這是我可以用CSS完成的東西，還是我需要JavaScript？

Answer 1

我認爲您確實需要使用Javascript，因爲並非所有瀏覽器都支持css hover psuedo-class，而不是<a>。你應該可以用最少的Javascript來完成它。見<map>標籤：http://www.w3schools.com/tags/tag_map.asp

例如，如果你想將鼠標懸停在圖像（image1.png）的左上方的100×100像素的正方形，以使覆蓋圖像（image2.png）：

<script type="text/javascript"> 
    function area1_mouseover() { 
     document.getElementById('image2').style.visibility = 'visible'; 
    } 
    function area1_mouseout() { 
     document.getElementById('image2').style.visibility = 'hidden'; 
    } 
</script> 
<img src="image2.png" id="image2" style="position: absolute; visibility: hidden; z-index: 2;" usemap="#my_map" /> 
<img src="image1.png" id="image1" usemap="#my_map" /> 
<map name="my_map"> 
    <area shape="rect" coords="0,0,100,100" onmouseover="area1_mouseover();" onmouseout="area1_mouseout();" /> 
</map> 

編輯：應用地圖到所有的圖像應該解決這個問題，因爲它們都是相同的大小。