画像置換せずにCSSのみでロールオーバーする - opacityだけじゃなくて要素の重なりも利用する

サンプル

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

• opacity_layer.html

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

ここでやりたいことは、

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

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

サンプルのソース

<ul id="sample_navi">
<li class="sample_contact"><a href="#"><img alt="お問い合わせ" src="http://www.tinybeans.net/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(http://www.tinybeans.net/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(http://www.tinybeans.net/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の状態でロールオーバーすると、かなり見にくいです。このときのために完全に透明にはしないんです。

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

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

以上です。