DN*BLOG

2008.1.21

CSSで画像一枚でロールオーバーボタン

とても便利な方法でロールオーバーが作れちゃうのでメモしておきます。。。
普通だと、画像を2枚(通常時とマウスオーバー時)必要なんですが、CSSプロパティの「opacity」を使えば一枚で作れちゃいます。

htmlソース

<a href="test.html"><img src="img/test.gif" alt="test" /></a>

CSSソース

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

画像のマウスオーバー時に不透明度を下げてロールオーバーボタンを再現しています。
IEはopacityに対応していないので、filterを使います。

これは、急いでいるときとかすごく便利ですね。

参考にさせていただいたサイト
CSSでロールオーバーもどきto-R

CSS でロールオーバーBowz::Notebook

FavoriteLoadingAdd to favorites

Category : CSS , Web Design

関連する記事