CSSを使って画像を透過させると、スワップイメージの時などにわざわざ透過した状態の画像などを用意しなくて済むので便利です。
■画像部分
<div class="sample"><a href="/"><img src="http://www.and-nbsp.com/images/IconSmiley.jpg" /></a></div>
■CSS
.sample a:hover img{
filter: alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
}
<div class="sample"><a href="/"><img src="http://www.and-nbsp.com/images/IconSmiley.jpg" /></a></div>
■CSS
.sample a:hover img{
filter: alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
}
それぞれ
filterがIE用
-moz-opacityがFirefox用
opacityがSafari,Opera用
となります。
「50」,「0.5」の値を変えれば透過の度合いを変えられます。
スワップイメージ以外にも利用できそうですね。
