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

スポンサードリンク

この記事が気に入ったら、ぜひシェアをお願いします!

2 件のコメント

  • CSSのみで画像のロールオーバー(その1)

    画像のロールオーバーって色々やり方ってあると思うんですが、今回はソースも短くて済む手軽な方法を紹介したいと思います。 CSSのみで画像のロールオーバー(その1)デモページ ダウ…

  • コメントを残す

    メールアドレスが公開されることはありません。