ロールオーバーの手法は様々ありますが、画像1つで実現できるロールオーバー。細かい挙動は出来ませんが、軽く視覚変化を起こしたいときに有効です。
CSSのプロパティはopacityを使います。CSS3で勧告予定のプロパティですが、モダンブラウザでは実装されています。問題となるIEは独自拡張指定で対応。
プロパティ
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
画像をimg要素で使用する場合
CSS
img { border: none; } a:hover img { filter: alpha(opacity=80); -moz-opacity: 0.80; opacity: 0.80; }
HTML
<a href="#"><img src="img/btn.gif" alt="ホーム" width="174" height="50" /></a>
画像置換の場合
CSS
.btn a { background: url(img/btn.gif) no-repeat; display: block; width: 174px; height: 50px; text-indent: -9999px; } .btn a:hover { filter: alpha(opacity=80); -moz-opacity: 0.80; opacity: 0.80; }
HTML
<p class="btn"><a href="index.html">ホーム</a></p>
コメントを残す