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標準の日々) | メイン | [書評]変革期のウェブ»

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

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

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

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

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

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

これはすごい

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