CSSでロールオーバーもどき

ロールオーバーの際に画像の輝度を上げるやり方がありますけど、CSSで簡単にできます。

XHTMLソース

<a href="http://blog.webcreativepark.net"><img src="./tor.gif" alt="to-R"/></a>

CSSソース

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

サンプル

ロールオーバー時にimg要素のopacityプロパティを使い不透明度を下げます。
IEはopacityプロパティに対応していない為、filterを使い不透明度を下げます。

簡単なんで、忙しいときに重宝します。

関連エントリー

CSSで実現するスマートなロールオーバー
画像置換
cssで画像をプリロードする方法（改
一番簡単な画像置換の方法
画像置換でメニューを作る
画像置換に関する考え方
BIR-もうひとつの画像置換

スポンサードリンク

«jsライブラリで実装する効率的なWeb制作(Web標準の日々) | メイン | [書評]変革期のウェブ»