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

[CSS でロールオーバーもどき](http://blog.webcreativepark.net/2007/07/18-221039.html) と言う記事を読んで、早速試してみました。これは良い！CSS の opacity と言うプロパティで不透明度をコントロールするんだそうです。

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

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

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

## サンプルソース

### HTML ソース

### CSS ソース

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

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

– [サンプルファイル](https://bowz.info/wp-content/uploads/css/002/index.html)

## 動作確認したブラウザ

– 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 と言うプロパティもあるみたいなんだが、これは何？
– 大変便利なので、この手法をどんどん使って行こうと思うんだが何かしらの問題はないのだろうか？