このページの本文へ

DESIGN Web制作の現場で使えるjQuery UIデザイン入門 ― 第17回

jQueryでロールオーバー!プリロード対応版

2009年10月29日 14時00分更新

西畑一馬/to-R

  • この記事をはてなブックマークに追加
本文印刷

※この記事は「Web制作の現場で使えるjQuery UIデザイン入門」の第17回です。過去の記事もご覧ください。


 ロールオーバーは、画像にマウスカーソルを重ねたときに自動的に別の画像に表示を切り替える効果です。非常にポピュラーなUI表現として、ナビゲーションメニューなどに広く使われています。今回は、ナビゲーションメニューバーを例に、jQueryを利用してロールオーバー効果を設定する方法を紹介します。

今回制作するサンプル

サンプル画面
ロールオーバー効果付きメニューバーの完成画面。メニューボタンにマウスカーソルが重なると別の画像を表示する。画像がクリックできることをユーザーに視覚的に伝えられるメリットがある(画像クリックでサンプルページを表示します)


ロールオーバーの基本的な仕組みを作ろう

 最初に、もっとも単純な方法でロールオーバー効果を作成してみましょう。画像(img要素)の上にマウスカーソルが重なると、スクリプトで指定した別の画像に差し替えるロールオーバーです。

 メニューバーのHTML/XHTML(以下、HTML)は以下のように記述しています。メニュー部分はul/li要素で作成し、li要素の内側にa要素を、その内側にimg要素を記述しています。li要素の後とその次のli要素の間を<!-- と -->でコメントアウトしているのは、CSSでli要素を横並びにしたときに発生する余分な空白(すき間)を防ぐためです。コメントを入れないと、CSSでdisplay:inlineを設定したときに半角スペース分の空白が表示されてしまいます。

サンプル画像
li要素の間をコメントアウトしておかないとli要素内の画像の間に余分な空白が表示されてしまう

サンプル01(HTML部分)


<ul>
    <li><a href="#"><img src="images/jquery.jpg" alt="jQuery" /></a></li><!--
    --><li><a href="#"><img src="images/javascript.jpg" alt="javascript" /></a></li><!--
    --><li><a href="#"><img src="images/css.jpg" alt="CSS" /></a></li><!--
    --><li><a href="#"><img src="images/html.jpg" alt="HTML" /></a></li>
</ul>

 CSSは次のようになります。リストを横並びにするため、li要素にdisplay:inlineを設定しています。

サンプル01(CSS部分)


li{
    display:inline;
    list-style-type:none;
}
img{
    border:none;
}


 スクリプト部分は次のようになります。

サンプル01(スクリプト部分)


$(function(){
    $("img[src='images/jquery.jpg']").mouseover(function(){
        $(this).attr("src","images/jquery_on.jpg")
    }).mouseout(function(){
        $(this).attr("src","images/jquery.jpg")
    })
    
    $("img[src='images/javascript.jpg']").mouseover(function(){
        $(this).attr("src","images/javascript_on.jpg")
    }).mouseout(function(){
        $(this).attr("src","images/javascript.jpg")
    })
    
    $("img[src='images/css.jpg']").mouseover(function(){
        $(this).attr("src","images/css_on.jpg")
    }).mouseout(function(){
        $(this).attr("src","images/css.jpg")
    })
    
    $("img[src='images/html.jpg']").mouseover(function(){
        $(this).attr("src","images/html_on.jpg")
    }).mouseout(function(){
        $(this).attr("src","images/html.jpg")
    })
})


 4つのボタンについて、それぞれjQueryのイベントを設定しています。処理の内容はまったく同じですので、そのうちの1つ、「jQuery」と書かれた画像ボタンを例に解説しましょう。


$("img[src='images/javascript.jpg']").mouseover(function(){
    $(this).attr("src","images/javascript_on.jpg")
}).mouseout(function(){
    $(this).attr("src","images/javascript.jpg")
})


 セレクター部分では、属性セレクターを利用して、「src属性が『images/javascript.jpg』のimg要素」を指定しています(関連記事)。

 mouseoverイベントが発生すると、attr()を使ってimg要素のsrc属性をロールオーバー時の画像である「images/javascript_on.jpg」に変更します。一方、mouseoutイベントが発生すると、元の「images/javascript.jpg」に戻すように設定しています(関連記事)。

 以上の処理をロールオーバー効果を設定したい画像の数だけ繰り返し記述すれば、ロールオーバー効果付きメニューの完成です。

jQuery

「まとめて読みたい!」との読者のみなさまの声にお応えし、この連載が本になりました。書籍版はさらに読みやすく加筆修正のうえ、書き下ろしのコラムや記事公開後のアップデート情報も盛り込んでいます。

Web制作の現場で使う
jQueryデザイン入門

本体 3,330円+税、B5変形判344ページ(オール4色刷)
ISBN978-4-04-868411-8

Amazon.co.jpで買う 楽天ブックスで買う

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング