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」に戻すように設定しています（関連記事)。

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