CSSを使い画像1種類だけでロールオーバー効果を簡単に実現する方法

HTML&CSS

ishida

2008.07.22

イメージ

画像にリンクをはる場合、ロールオーバー用の画像を別途書き出して JavaScriptで差し替える方法が一般的です。

それだと毎回画像が増えるたびに、ロールオーバー用の画像を書き出すのが手間になります。

今回ご紹介するのは、そんな画像効果を簡単に実装するためのTIPSです。

上記の画像にマウスオーバーすると、画像のスタイルが切り替わります。

htmlのコードはこんな感じ。

<ul class="photo">
<li><a href="#"><img src="hoge1.jpg" alt="サンプル1" width="160" height="120" /></a></li>
<li><a href="#"><img src="hoge2.jpg" alt="サンプル2" width="160" height="120" /></a></li>
<li><a href="#"><img src="hoge3.jpg" alt="サンプル3" width="160" height="120" /></a></li>
</ul>

CSSの設定は以下となります。

ul.photo li {
	float: left;	
	margin-right: 5px;
}

ul.photo li a {
	display: block;
	background: #CCCCCC;
	border: 1px #333333 solid;
}

ul.photo li a img {
	padding: 4px;
	opacity: 0.5; /* IE以外透過設定 */
	filter: Alpha(opacity=50); /* IE用透過設定 */
}

ul.photo li a:hover {
	background: #FFFF00;
	border: 1px #FF0000 solid;
}

ul.photo li a:hover img {
	opacity: 1; /* IE以外透過設定 */
	filter: Alpha(opacity=100); /* IE用透過設定 */
}

opacityプロパティを使用して、画像に透過度を設定しています。
またopacityプロパティに対応していないIEには、独自CSS拡張のフィルターを使用します。
画像にマウスオーバーされる時に、hoverにて透過度を100%に戻します。

透過度を設定することで、処理を簡単にできるのでいろいろと応用できると思います。
ご参考に。