ishida 20:20 PM
第 9 回目は「 CSS だけで実現する画像ボタンのロールオーバー」です。
javascriptを使用せずに、ロールオーバー効果をCSSのみでやってみましょう。
以下のボタン画像にマウスをのせてみてください。
サンプル1. 位置をずらす
XHTML
<p class="sample1"><a href="#"> <img src="hogehoge" alt="ボタン" width="200" height="50" /></a></p>
CSS
.sample1 a:hover {
position: relative;
top: 1px;
left: 1px;
}
positionプロパティを使って位置をずらします。
サンプル2. 透過させる
XHTML
<p class="sample2"><a href="#"> <img src="hogehoge" alt="ボタン" width="200" height="50" /></a></p>
CSS
.sample2 a:hover {
opacity: 0.7; /* Opera・Safari */
-moz-opacity:0.7; /* Firefox */
filter: alpha(opacity=70); /* IE */
zoom: 1; /* IE */
}
各ブラウザにてプロパティが違うので、対応するプロパティで透過させます。なおIEの場合は、インライン要素に透過処理をさせる場合、HasLayoutプロパティもtrueに設定する必要があるのでzoomを使っています。
サンプル1. 背景色をかえる
XHTML
<p class="sample3"><a href="#"> <img src="hogehoge" alt="ボタン" width="200" height="50" /></a></p>
CSS
.sample3 a:hover img {
background-color: #FF6600;
}
背景色を設定してやります。なお色が変わる部分については、ボタン画像の方で透過処理して書き出すのがポイントです。
