[ CSS ] opacity を使ってロールオーバーもどき

CSS でロールオーバーもどき と言う記事を読んで、早速試してみました。これは良い！CSS の opacity と言うプロパティで不透明度をコントロールするんだそうです。

従来の方法 ( JavaScript + Fireworks でロールオーバー用の画像を用意 ) でロールオーバーさせる場合、

• ロールオーバー用の画像はボタンの明るさぐらいしか変えない。( 私の場合 )
• body タグでロールオーバー用の画像をプリロードさせるのが邪魔臭い。

なんて所が嫌だったんですよねー。

サンプルソース

HTML ソース

<a href="#"><img src="button.png"></a>

CSS ソース

a:hover img {
    opacity: 0.8;
    filter: alpha(opacity=80);
}

opacity は不透明度を操作 ( 0 - 1.0 ) するプロパティなんですが、Internet Explorer は opacity プロパティに対応していないので、filter を使い不透明度を操作するんだそうです。

• サンプルファイル

動作確認したブラウザ

• OK - Mac Safari 2.0
• OK - Mac Firefox 2.0
• OK - Mac Opera 9.2
• NG - Mac Internet Explorer 5.2
• OK - Windows Firefox 2.0
• OK - Windows Internet Explorer 6.0

雑感

• 調べてみると -moz-opacity と言うプロパティもあるみたいなんだが、これは何？
• 大変便利なので、この手法をどんどん使って行こうと思うんだが何かしらの問題はないのだろうか？

関連する記事

• [ JavaScript ] jQuery でテーブルのセルをストライプ ( しましま ) にするサンプル (0)
• [ CSS ] ３カラムの CSS を書いてみた (0)
• [ CSS ] 行頭をインデントするサンプル (2)
• [ CSS ] 縦方向メニューのサンプル (0)
• [ CSS ] 画面の中央にブロック要素を配置するサンプル (2)