こんにちはNAOです。
今回はjQuery初期編と題してjQueryを始めたての方に色々な簡単な所から学んでいただき、少しでも役に立つところがあれば、是非取り入れてみてください。
それでは今回は
「画像のロールオーバー」
になります。
画像をロールオーバーとは？
ロールオーバーとは、画像にマウスを乗せた際、画像が他の画像に切り替わる、というものです。
ボタンをロールオーバーする手法として、jQueryを使わずにCSSだけでも実現可能です。
ただし、CSSで対応する場合は、画像ひとつずつに対して画像の設定をする必要があります。
●マウスが乗っていない状態
●マウスが乗っている状態
まずはHTMLとCSSでの作成の仕方を紹介します。
HTML
|
1 2 3 4 5 6 7 |
<ul class="navi"> <li class="navi01"><a href="#">メニュー1</a></li> <li class="navi02"><a href="#">メニュー2</a></li> <li class="navi03"><a href="#">メニュー3</a></li> <li class="navi04"><a href="#">メニュー4</a></li> <li class="navi05"><a href="#">メニュー5</a></li> </ul> |
CSS
こちらで試す方は、画像はご自分のデザインに入れ替えてお試しください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
.navi li { float: left; width: 160px; height: 67px; } .navi li a { display: block; width: 160px; height: 67px; text-indent: -99999px; } .navi01 {background:url(images/img_navi01_off.gif)} .navi01:hover {background:url(images/img_navi01_on.gif)} .navi02 {background:url(images/img_navi02_off.gif)} .navi02:hover {background:url(images/img_navi02_on.gif)} .navi03 {background:url(images/img_navi03_off.gif)} .navi03:hover {background:url(images/img_navi03_on.gif)} .navi04 {background:url(images/img_navi04_off.gif)} .navi04:hover {background:url(images/img_navi04_on.gif)} .navi05 {background:url(images/img_navi05_off.gif)} .navi05:hover {background:url(images/img_navi05_on.gif)} |
★解説 メニューの画像を、背景画像として設定しています。そして、hoverの時（マウスがメニューに乗っている時）には、画像を違う画像に差し替える、ということをしています。
HTML、CSSともにややこしく、また手間がかかっているのがわかります。
例えば、HTMLのliタグには、ひとつひとつクラスを付与しなければなりません。
また、CSS側でも、それぞれに対して、マウスオン時の画像とオフ時の画像、両方を設定しなければなりません。
これでは、ロールオーバーしたい画像が増えた際、CSSはどんどん長くなっていきます。
あまり効率的とはいえませんね。
そこで、jQueryを使って、ロールオーバーを実現していきます。
HTMLとCSSを準備する
jQueryを使用する準備として上記とは違ってHTMLは省略できていませんが、
CSSはかなり短く省略できています。
HTML
|
1 2 3 4 5 6 7 8 9 |
<div class="contents"> <ul class="navi"> <li><a href="#"><img src="images/img_navi01_off.gif" alt="メニュー1" /></a></li> <li><a href="#"><img src="images/img_navi02_off.gif" alt="メニュー2" /></a></li> <li><a href="#"><img src="images/img_navi03_off.gif" alt="メニュー3" /></a></li> <li><a href="#"><img src="images/img_navi04_off.gif" alt="メニュー4" /></a></li> <li><a href="#"><img src="images/img_navi05_off.gif" alt="メニュー5" /></a></li> </ul> </div> |
CSS
|
1 2 3 |
.navi li { float: left; } |
★解説 画像は背景画像として使うのではなく、画像自体にリンクを貼り、ボタンとして使います。また、CSSでは、liタグを回りこむように指定し、画像が横に並ぶようにしています。
ただし、今の状態ではメニューにマウスを乗せても、ロールオーバーは起こりません。
jQueryを記述しよう
そこでjQueryの登場ですよ🎵
ではjQueryを記述してみましょう。
ルールとして、
『マウスがオフの時は画像ファイル名の最後に「_off」が入る。オンの時には「_on」が入る。』
と決めておきます。
こうやってファイル名のルールを決めておき、そのルールにのっとって画像を準備しておくことで、jQueryでうまく扱えるようになります。
|
1 2 3 4 5 6 7 8 9 10 |
$(function(){ $("a img").hover( function(){ $(this).attr('src', $(this).attr('src').replace('_off', '_on')); }, function(){ $(this).attr('src', $(this).attr('src').replace('_on', '_off')); } ); }); |
以下のようにロールオーバーして画像が変われば成功です。
まとめ
jQueryの詳しい解説は少し難しい面もありますので別に機会を作りたいと思います。
今回は長々とコードを書くことを解消するためにjQueryを取り入れてみると後々に楽にページ作成に取り組めるので是非実践してみてください。
jQueryの入り口として。
ありがとうございました。
