opacityプロパティを使い、透明度を変えて画像をロールオーバーさせる

覚書として。
細かい装飾はできないけど、ロールオーバー用画像をつくらなくてもいいのは楽チン。
画像は若干暗めにつくっておくと、ロールオーバーがキレイ。

• opacityはCSS3で勧告予定のプロパティだが、IEを除くモダンブラウザではすでに実装されている。
• IEでは実装されていないため、filterを使って対処する。

参考サイト
IE・Firefox・Opera・Netscape・Safariで表示可能な半透明CSS/Opacityテクニック

CSS opacity設定

• IE
  filter: alpha(opacity=透明度);
  100が100％となる。50％の場合は、50
• Firefox・Netscape
  -moz-opacity:.透明度;
  1.0が100％となる。50％の場合は、.50
• Opera・Safari
  opacity:透明度;
  1.0が100％となる。50％の場合は、.50

画像を直に置く場合

<ul>
  <li><a href="index.html"><img src="img/navi_home.gif" alt="ホーム" /></a></li>
</ul>

ul li a:hover img {
	filter: alpha(opacity=80);
	-moz-opacity: 0.80;
	opacity: 0.80;
}

画像置き換えの場合

<ul>
  <li class="navi_home"><a href="index.html">ホーム</a></li>
</ul>

ul li.navi_home a {
	background: url(img/navi_home.gif) no-repeat;
	display: block;
	width: 200px;
	height: 50px;
	text-indent: -9999px;
}
ul li.navi_home a:hover {
	filter: alpha(opacity=80);
	-moz-opacity: 0.80;
	opacity: 0.80;
}

個人的にはロールオーバーの時は、上にカーソルが乗っているということで、画像は暗くなって欲しいなと思います。
この手法でいくと明るくなってしまうのよね。
通常時にopacityで明るくしておいて、ロールオーバー時にopacity指定をとって暗くするというのもややこしいけどいいかもしれません。