HTML + CSS

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

2009-10-16
4分で読了
更新: 2025-12-14

目次

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

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

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

サンプル

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

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

ここでやりたいことは、

  1. 通常は　お問い合わせ の画像
  2. マウスオーバーすると　お問い合わせ の画像

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

サンプルのソース

    

  • お問い合わせ
    • 



#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】

ishot-128.png

【画像のみOFF】

ishot-129.png

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

ishot-131.png

【CSSと画像がOFF】

ishot-130.png

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

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

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

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

以上です。

この記事をシェア

関連記事