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

HP登録でSEO対策！アクセスアップにコチラ！
検出率No.1・PC軽快さNo.1のウイルス対策ソフト

ロールオーバーの際に画像の輝度を上げるやり方がありますけど、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標準の日々) | メイン | [書評]変革期のウェブ»

このエントリーのトラックバックURL
http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/180
トラックバック内容
» CSS でロールオーバー from Bowz::Notebook
CSS でロールオーバーもどき と言う記事を読んで、早速試してみました。これは良い！ CSS の opacity と言うプロパティで不透明度をコントロー...
トラックバック時刻: 2007年7月19日 22:25
» Web標準の日々 J3 jsライブラリで実装する効率的なWeb制作 from ProjectDD Blog
jsライブラリで実装する効率的なWeb制作 西畑 一馬さん JavaScrip...
トラックバック時刻: 2007年7月20日 00:22
» Firefox/IE/Safali/Operaで使える半透明CSS(opacity) from 日刊にしこり－埼玉版－
a.popup1{position:relative;} a.popup1 span{ position:absolute; top:-20px; ...
トラックバック時刻: 2007年12月28日 10:48
コメント

必要に応じて、「KHTMLOpacity」「MozOpacity」など入れると幅も広がりますね！

投稿者:hirorock | 2007年7月19日 12:18

このやり方はキレイというより、カワユイですね。
IE５系で使えないのは残念ですが…

ほかにも使える手法が掘り出せそうです。
ちょっと参考にさせていただきます。

投稿者:hama | 2007年8月10日 20:20

これはすごい

投稿者:aaa | 2007年8月12日 22:37
コメントを投稿


画像の中に見える文字を入力してください。