帶映射鏈接的單色圖像導航。懸停時，我可以遮擋圖像的每個部分嗎？

Question

我有一個圖像，我們用於導航網站的頂部。我曾經爲橫幅的每個部分設置鏈接。我想爲圖像的每個部分懸停實現不透明效果。這可能嗎？非常感謝，丹麥人。

Answer 1

您可以將圖像切分爲單獨的圖像;每個滾動一個，圖像仍然會顯示爲一個圖像，但會有不同的部分;對於懸停然後你可以要麼使用JavaScript或有它與另一種出現不透明

這個網站同時顯示了JS方法和CSS的方法替換圖像...

http://www.webvamp.co.uk/blog/coding/css-image-rollovers/

只是重複了對於圖像的每個部分

Answer 2

您可以在每個部分都有一個div。每個div都會調用一個javascript事件。這甚至可以改變div的風格。類似這樣的：

<javascript> 
    function changeCss(getId){ 
    var getDiv = document.getElementById(getId) 
    getDiv.className ="myHover"  
    } 
</javascript> 
<styles> 
.plain{ 
width:150px; 
height:200px; 
position:absolute; 
top:0; 
left:0; 
z-index:1000; 
background-color: #666699; 
} 
.myHover{ 
width:150px; 
height:200px; 
position:absolute; 
top:0; 
left:0; 
z-index:1000; 
background-color: #666699; 
filter: alpha(opacity=80); 
} 
</styles> 

    <div onMouseOver="changeCss(this.id)" id="wait" class="plain"> 
     <img src=""/>         
    </div> 

這只是空閒的，並沒有經過測試。試試看，如果有任何問題，請告訴我。