带映射链接的单色图像导航。悬停时，我可以遮挡图像的每个部分吗？

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> 

这只是空闲的，并没有经过测试。试试看，如果有任何问题，请告诉我。