メニューボタン（リンク入り）に画像を使っていますが、マウスポインタを乗

質問

メニューボタン（リンク入り）に画像を使っていますが、マウスポインタを乗せた時に（今ここを選択していることが分かるように）色が変化したり、枠が付いたりするようにしたいと考えています。
いろいろ調べてみたのですが、１つの方法として次のように書けばいいようです。

（CSS）
a{
display:block;
width:50px;
height:50px;
background:url(img_02.png) no-repeat 0px 0px;
}

a:hover img{
filter: alpha(opacity=0);
-ms-filter: alpha(opacity=0);
opacity: 0.0;
}

（HTML）
<a href="#"><img src="img_01.png"></a>

しかし、全く変化ありませんでした。
GIF画像を使っているのですが、これをPNG形式の画像に変更して（CSS）のbackground:url(img_02.png) no-repeat 0px 0px;の中の「img_02」の部分を変更すればいいのでしょうか？
それとも「02」の部分だけ変更すればいいのでしょうか？
（HTML）も同様に「img_01」なのか「01」の部分だけなのか？

また、（CSS）にあるdisplay:block;
width:50px;
height:50px;
は書く必要があるのでしょうか？
画像を使っているのでわざわざ書く必要がないとも思うのですが・・・。

何が間違っているのか分かりませんので、お気づきの点や、その他に良い方法がありましたら教えてください。

どうぞよろしくお願いします。

回答No.1

yyr446 · ベストアンサー

原理を理解すれば、何をしていすればよいかおのずと解ると思います。

これは、背景画像でボタン画像の代用するの小技と、
マウスホバー時に画像の透明度を変える小技の組み合わせです。
まず、
a{
display:block;
width:50px;
height:50px;
background:url(img_02.png) no-repeat 0px 0px;
}
の部分で<a></a>を50px×50pxのボックス表示にして、背景画像
としてimg_02.pngを1枚表示させます。しかし<a></a>内には
<img src="img_01.png">があるので、背景画像は見えない状態です。
次に
a:hover img{
filter: alpha(opacity=0);
-ms-filter: alpha(opacity=0);
opacity: 0.0;
}
は、<a></a>がマウスホバーされた時、その子供の<img>の
透過度（opacity）を透明(0)にしています。

同じようなのを3つも指定しているのは、ブラウザーやそのバージョン
によって、opacity属性指定の実装方法が異なるからです。
＜IE9　からは　opacity:0.0　だけでよいかも（未確認）＞

お礼

ご回答いただきありがとうございます。
画像が２枚重なった状態で、ホバー時に上の画像が透過するという仕組みですね。
なるほど、わかりました。

回答No.3

naokita

CSSのみで色々な方法がありますが、一長一短で100％完璧な方法は存在しない。
filterだけでって事ではないようなので、以下、考え方（ヒントだけ）ですが、

（１）
img_01.pngの画像を透明GIFに変更して、背景画像を切り替える。
a{ background:～～;}
a:hover{ background:～～;}

（２）
<a href="#">テキスト</a>として
text-indent:-9999;　でテキストを表示させずに（１）の要領で背景画像を表示させる。

（３）
<a href="#"><img src="img_01.png"></a>の
img_01.pngとimg_02.pngを１枚の画像にして、
positionで画像の座標を変化。

（４）
img_01.pngとimg_02.pngを１枚の画像にして、
a:hover img{ margin-top: -○○px;}
負のマージンを使う方法。

（５）その他・・・

枠線は、画像自体に線を描くか
a:hover img{border:～～;}とか。

display:block; width:50px; height:50px; の件は、
ケースバイケースで必要。

お礼

ご回答いただきありがとうございます。
（１）と（５）が使えそうですね。
（５）だと、枠線が表示されるのはいいのですが、枠線の分だけ幅が広がるので、他のセルも影響を受けて揺れてしまいます。
これを解消する方法があれば教えていただけませんか？

回答No.2

yyr446

「その他に良い方法」
javascript使用ＯＫとするなら、CSSで小技使う必要は無いです。
<img>のmouseoverイベントとmouseoutイベントで画像のURLを変えてしまうだけです。

<a href="#"><img src="img_01.png" onmouseover="this.src='img_02.png'" onmouseout="this.src='img_01.png'" alt="リンク画像"></a>

お礼

ご回答ありがとうございます。
とりあえずはCSSでやってみようと思います。