CSSでマウスオーバー時に画像を切り替える方法


当サイトの右上にあるナビゲーションバーのように、カーソルを乗せると画像が切り替わるのをよく見かけると思います。今回はそのロールオーバー効果をCSSで実現する方法について簡単に書いてみたいと思います。
はじめに通常のイメージと、マウスカーソルのonの時用に2枚画像を用意するのですが、ここでまず注意しなければならないこと。
それは別々に用意するのではなく、1枚画像として用意することです。



上がデフォルトの状態で、下が選択時の状態を想定しています。
画像を別々に用意している場合、マウスオーバー時にはじめて2枚目(onの画像)の画像が読み込まれる為、タイムラグが生じて読み込む際に一瞬画像が消えてしまいます。
実際に経験したことがある人はわかると思いますが、コレがものすごく気持ち悪いです。
一つにまとめておくことで、最初のページロードで2枚目まで読み込むことができ、マウスオーバー時にCSSで表示位置を入れ替えてあげるだけで、あたかもボタンが切り替わったかのように見せることができるわけです。

HTML

<ul id="navi">
<li><a href="#">Contact Us</a></li>
</ul>

CSS

ul#navi li{
text-indent: -9999px;
overflow: hidden;
}

ul#navi li a{
display: block;
background: url(images/contact.jpg) 0 0 no-repeat;
width: 140px;
height: 40px;
}

ul#navi li a:hover{
background: url(images/contact.jpg) bottom left no-repeat;
}

ソースはこんな感じになります。

ポジションの移動はbottom left という風にしていますが、数値でも大丈夫なのでこの場合だと
0 -40px になりますね。

素材として公開するつもりで作ってなかったけど折角なので!

文字なしの140*40が一緒の画像でセットになっているので140*80です。

▲VISTA風ナビゲーションバー のダウンロードはこちら (835)

当サイトで紹介している素材はすべてオリジナルのものです。個人サイトから企業サイト、ECサイト用の素材作りにも注力しています。
アイコン、ボタン、メニュー、見出し素材など、WEBサイト制作に必要な素材がすべて無料でご利用頂けます。商用利用も加工利用も自由にしていただいて構いません。是非ご利用下さい!

タグ: ,

1件のコメント/トラックバックがあります。

  1. [...] ロールオーバーを前提としたナビゲーションバーです。 マウスカーソルのoff時とon時のイメージがセットになっています。 サイズは145*44です。左、中央、右と3パターン入ってるので項目に応じて増やしていただけると思います。 尚、cssでの設定が少し必要になるので、過去エントリーの「CSSでマウスオーバー時に画像を切り替える方法」を合わせてご利用下さい! [...]

エントリーに対するコメントがありましたらお聞かせ下さい。
以下のURLでトラックバックも受け付けております。

http://chaosmode.info/archives/185/trackback/