CSS 背景画像(画像置換)を使わないロールオーバー

前々から画像置換を使ったボタンってどうなの!?って思っていました。
そこでjavascriptを使わずにロールオーバーする方法のご紹介。

Click

HTML

<div class="img_01">
<a href="#"><img src="images/img/img_01.gif" alt="Click" width="150" height="50" border="0" /></a>
</div>

スタイルシート

.img_01 a:hover img {
opacity:0.6;
filter: alpha(opacity=60);
}