0

ホバーすると、画像が元の白黒画像のカラーバージョンに変更される画像のセクションを含むフルページ画像を探しています。イメージ マップと onMouseOver でこれを実行しようとしましたが、成功しませんでした。使用されている画像は、カラーと白黒の 2 つだけです。

白黒画像のセクションにカーソルを合わせると、全体がカラー バージョンに変わり、onMouseOut が白黒に戻るようにしたいだけです。これをブログのスプラッシュ スクリーンとして使用しており、ホバー セクションはサイトへのリンクとして機能します。

助けてくれてありがとう

4

1 に答える 1

0

ホバー領域が「正方形」であることを気にしない場合は、純粋な css を使用するとうまくいくはずです (背景色を適切な画像に置き換えてください。border上の画像aは説明用です)。Firefox、IE7、IE8 でテスト済み:

HTML:

<a href="#"><span class="img"></span></a>

CSS (IE7-8 バグ用に編集) :

body {
 margin: 300px 218px 178px 400px; /*see explanation below css*/
 width: 22px; /*total width of a tag including padding and borders*/
 height: 22px; /*total height of a tag including padding and borders*/
}

a { /*warning, do not give this position: use margin to position it*/
 width: 20px; 
 height: 20px; 
 display: block; 
 border: 1px solid red; 
 overflow: visible; 
 /*deleted margin from this: moved to body*/
}
a span.img {
 position: absolute; /*this gives it block display by default*/
 top: 0; 
 left: 0; 
 z-index: -1; 
 background-color: yellow; /*bw image here*/
 width: 640px; /*image width*/
 height: 500px; /*image height*/
}
a:hover span.img {
 background-color: blue; /*color image here*/
}
/*deleted  the a:hover span.img:hover as it was not needed after all*/

もちろん、IE6 が懸念される場合は、javascript で何らかの処理を行ってspan:hover.

編集時に追加:aタグがIEブラウザーの定義された領域の外にあることがあることがわかりました。これを避けるには、と がタグを配置するように本文に余白を配置する必要があり、leftとtopは画像サイズからタグの合計幅を差し引いた差を補う必要があります。arightbottoma

于 2010-07-23T21:38:27.993 に答える