グローバルナビゲーションやボタン等で、画像を使ってロールオーバーを表現する方法にはいくつかあります。

僕は、以前はCSSでの画像置換によるロールオーバーを使うことが多かったのですが、最近では JavaScript（特に yuga.js）によるロールオーバーが基本になっていました。

しかし、最近、CSSだけでロールオーバーする方法を思いついたので、それをメインに使っています。特に目新しいことをやっているわけではないんですが、今まで思いつかなかったので、自分的には「おー大発見！」という感じでした。

サンプル

こちらのサンプルをご覧ください。

• opacity_layer.html

ロールオーバーできましたでしょうか。

ここでやりたいことは、

1. 通常は　 の画像
2. マウスオーバーすると　 の画像

といった具合です。ちょっとサンプルが見にくかったらすみません。

サンプルのソース

<ul id="sample_navi">
<li class="sample_contact"><a href="#"><img alt="お問い合わせ" src="/blog/images/contact.jpg" width="135" height="45" /></a></li>
</ul>

#sample_navi a {
 display: block;
}
#sample_navi a img {
 border: none;
}
#sample_navi li {
 float: left;
 list-style: none;
}
#sample_navi a,
#sample_navi li {
 margin: 0;
 padding: 0;
}
#sample_navi li.sample_contact {
 background: url(/blog/images/contact_on.jpg) no-repeat left top;
}
#sample_navi li a:hover img {
 opacity: 0.1;
 filter: alpha(opacity=10);
}

解説

仕組みは簡単です。

まず、ロールオーバー用の画像を下のレイヤーに当たる li要素の背景画像に指定しておきます。

#sample_navi li.sample_contact {
 background: url(/blog/images/contact_on.jpg) no-repeat left top;
}

そして、上のレイヤーに当たる a要素内の img要素にマウスオーバーしたときに、その img要素を完全に近いまでに透過させてしまいます。

#sample_navi li a:hover img {
 opacity: 0.1;
 filter: alpha(opacity=10);
}

これにより、画像を差し替えたようなロールオーバーが実現できます。

opacity を 0.1 や 10 にしているのは、画像が OFFで CSSが ONの状態でロールオーバーしたときにうっすら alt属性の文字を残すためです。

メリットとデメリット

メリットとしては、img要素の alt属性さえきっちり入れておけば、「画像を非表示」にしても問題ありませんし、「CSSを使用しない」状態でもちゃんとimg要素が表示されますし、両方がOFFの状態でも問題ありません。JavaScriptも関係ありません。

【CSSのみOFF】

【画像のみOFF】

【画像のみOFFでロールオーバーしたとき】

【CSSと画像がOFF】

また、JavaScript によるロールオーバー時の画像のちらつきというか、時々あるもっさり感もなく CSS Sprite のようなスムーズさです。

デメリットとしては、CSSがONで画像がOFFの状態でロールオーバーすると、かなり見にくいです。このときのために完全に透明にはしないんです。

また、画像を２枚用意しなければいけない点もデメリットかもしれませんが、この手法をとるのは、もともと画像を２枚作って、それをマウスオーバーで差し替えたい、というときなので、これは対したデメリットではありませんね。

僕にとってはちょっとした発見でしたが、皆様は既に使っている手法かもしれませんね。

以上です。