[作って学ぶ！jQuery] 第3回 画像ロールオーバーを作って学ぶ

No Photo

イメージ

Webサイト制作において、クリックできる部品にマウスポインタを乗せたときなどに、表示を切り替えるエフェクトを「ロールオーバー」と呼びます。バシャログの左サイドバーの「ホーム」「はじめての方へ」にマウスをのせるとハイライトしますが、これもロールオーバーです。今回はjQueryを使ったロールオーバーの実装を解説いたします。

デモ

今回作成したロールオーバーは次のようなものです。

HTMLソース

<ul id="first" class="nav clearfix">
<li><a href="/"><img src="img/btn_home.gif" alt="HOME" width="160" height="40" /></a></li>
<li><a href="#"><img src="img/btn_news.gif" alt="HOME" width="160" height="40" /></a></li>
<li><a href="#"><img src="img/btn_about.gif" alt="HOME" width="160" height="40" /></a></li>
</ul>

JavaScriptソース

$('ul.nav#first a img')
  .mouseover(function(){
    var onSrc = $(this).attr('src').replace('.gif', '_o.gif');
    $(this).attr('src', onSrc);
  })
  .mouseout(function(){
    var offSrc = $(this).attr('src').replace('_o.gif', '.gif');
    $(this).attr('src', offSrc);
  });

こちらのサンプル(サンプルページの1つ目)について詳しく説明いたします。(Webページの準備がすんだときに〜というコードは決まり文句なので省略)

(1)ロールオーバーをいかにしてjQueryのコードに落とし込むか

jQueryのコードを書くときは、やりたいことを３つに分けることを意識するのがいいかもしれません。ロールオーバーであれば

  • 1.画像に
  • 2.マウスポインタがのったとき, はずれたとき
  • 3.img要素のsrc属性を書き換える

という風に分割すると、1,2のコードはだいたい決まってきます。(これは1.何に対して(対象)、2.いつ、どうなったとき(イベント)、3.どうするという分け方です。)コードに1,2の説明を加えると

$('ul.nav a img')    // 1.リスト内のアンカー内の画像に
  .mouseover(function(){     // 2.マウスポインタが乗ったとき
    var onSrc = $(this).attr('src').replace('.gif', '_o.gif');
    $(this).attr('src', onSrc);
  })
  .mouseout(function(){      // 2.マウスポインタがはずれたとき
    var offSrc = $(this).attr('src').replace('_o.gif', '.gif');
    $(this).attr('src', offSrc);
  });

となります。1についてはCSSセレクタで決定します。2については「いつ」に対応した命令が20個くらい用意されていますので、それから選びます。マウスが画像の上にのったとき、ならmouseover, クリックされたとき、ならclickです。( Events - jQuery 日本語リファレンスのEvent Helpersの項にのってます。 ) jQueryのスゴイところは、CSSセレクタを使うことでコードが比較的楽に決められることです。

(2)画像を切り替える

残りは画像を切り替えるだけです。コードだと4,5行目の

    // ...
      var onSrc = $(this).attr('src').replace('.gif', '_o.gif');
      $(this).attr('src', onSrc);
    // ...
});

の部分です。7,8行目もですけど。この部分、必要な機能によってバリュエーションがでる部分ですが、今回はなるべくコードがシンプルになるようにしました。この部分も3つに分けられます。

  • 1.画像のsrcを文字列で取得して、
  • 2.ロールオーバー後の画像のパスに書き換えて
  • 3.src属性を上書きする

という感じです。jQueryのコードでは

  • 1. $(this).attr('src')
  • 2. var onSrc = $(this).attr('src').replace('.gif', '_o.gif');
  • 3. $(this).attr('src', onSrc);

となります。「$(this)」ってだけ見るとよくわからない感じですが、ここでは(1)-1,2で「画像にマウスオーバーしたとき」に絞り込んでいるので、$(this)は、マウスオーバーしたimg要素のことを指します。$(this)がでてきた、その周りをみたら、 

    $('ul.nav a img')
        .mouseover(function(){
            $(this).hogehoge();
        })

となっていた。→$(this)はマウスオーバーされたimg要素ということです。

ケース：CSSプロパティのopacityを書き換える

ロールオーバーを表現するのにopacity値を書き換えるという手もあります。書いている途中で気づきましたが、こっちの方がコードはシンプルですね。

JavaScriptコード

$('ul.nav#second a img')
  .mouseover(function(){
    $(this).animate({opacity: 0.7}, 'fast');
  })
  .mouseout(function(){
    $(this).animate({opacity: 1.0}, 'fast');
  });

ケース：はじめからロールオーバー後の画像になっている場合に対応

グローバルナビゲーションでは、現在表示されているコンテンツの場所を示すために、画像をはじめからロールオーバー後の状態にしておくことがあります。そんなとき、いまのスクリプトだと、マウスを乗せたとき、URLが「btn_home_o_o.gif」とかになって困ります。対応策をjQueryだけでやると次のようになります。

JavaScriptコード

$('ul.nav#third a img:not([src$=_o.gif])')
    // 以下略

セレクタ部分がすこし複雑になりました。img要素のsrc属性の最後が「_o.gif」じゃないときって意味です。もし、現在の場所を示すのに「li class="current"」を設定出来るなら、次のように記述できます。

$('ul.nav#third li:not(.current) a img')
    // 以下略

こっちのほうが理解しやすいと思います。

まとめ

  • シンプルな画像ロールオーバーの作り方を解説しました
  • 透明度を変えるロールオーバーのサンプルを紹介しました
  • 実装時に起こりがちな問題の例を1つとりあげました
  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ

Copyright © C-brains Corporation. all rights reserved.