html - 带有映射链接的单一图像导航。我可以在悬停时使图像的每个部分不透明吗？

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>   

这只是随意的，尚未经过测试。试一试，如果有任何问题，请告诉我。