0

Web サイトの上部でナビゲーションに使用している画像があります。バナーの各セクションにリンクを設定していました。画像の各部分のホバー時に不透明な効果を実現したいと考えています。これは可能ですか？どうもありがとう、デーン。

4

2 に答える 2

1

各セクションに 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>

これは単なるフリーハンドであり、テストされていません。試してみて、問題があればお知らせください。

于 2013-02-27T17:44:33.127 に答える
1

画像を別々の画像にスライスできます。ロールオーバーごとに 1 つ、画像は 1 つの画像のように見えますが、セクションが異なります。ホバーの場合、JavaScriptを使用するか、画像を不透明に見える別の画像に置き換えることができます

このサイトでは、JS 方式と CSS 方式の両方を示しています...

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

画像の各部分に対してそれを繰り返すだけです

于 2013-02-27T17:19:24.040 に答える