[ プログラミング ] jQueryでメニュー画像のロールオーバーと、現在ページのメニュー画像をハイライトする

グローバルメニューに、ロールオーバーと、現在ページのハイライトを実装したい場合があります。もちろん、CSSでも可能ですが、jQueryでもできます。

以前、グローバルメニューに、ロールオーバーと、現在ページのハイライトを実装したサンプルをご紹介しましたが、その際はメニューそのものはテキストで背景画像を変更させるものでした。

今回は、HTMLでメニューを画像で指定して、jQueryでロールオーバー用の画像とハイライト用の画像に切り替える方法を紹介します。

DOMO

HTML

<div id="menu">
   <ul>
      <li><a href="index.html"><img src="images/menu1.gif" alt="menu1" /></a></li>
      <li><a href="menu2.html"><img src="images/menu2.gif" alt="menu2" /></a></li>
      <li><a href="menu3.html"><img src="images/menu3.gif" alt="menu3" /></a></li>
      <li><a href="menu4.html"><img src="images/menu4.gif" alt="menu4" /></a></li>
      <li><a href="menu5.html"><img src="images/menu5.gif" alt="menu5" /></a></li>
      <li><a href="menu6.html"><img src="images/menu6.gif" alt="menu6" /></a></li>
   </ul>
</div><!-- /#menu -->

CSS

#menu {
   width:960px;
   overflow:hidden;
   margin:30px auto;
   font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;
}

#menu ul {
   margin:0;
   padding:0;
}

#menu li {
   float:left;
   list-style:none;
}

#menu li a {
   display:block;
   width:160px;
}

Java Script

$(function(){
   $('#menu img').each(function(){

      // リンク先のURLを取得
      var url = $(this).parent('a').attr('href');
      // 現在表示されているページのURLを取得し、リンク先のURLと照合
      if(location.href.match(url)) {
         // マッチすれば、「class="current"」を付加
         $(this).addClass('current');
         // マッチしなければ、「class="current"」を削除
      } else {
         $(this).removeClass('current');
      }

      // 画像名を取得
      var src = $(this).attr('src');
      // すでに画像名に「_on.」が付いていた場合、ロールオーバー処理をしない
      if (src.match('_on.')) return;

      // ロールオーバー用の画像名を取得(_onを付加)
      var src_on = src.replace(/^(.+)(\.[a-z]+)$/, '$1_on$2');
      // 画像のプリロード(先読み込み)
      $('<img>').attr('src', src_on);

      // ハイライト用の画像名を取得(_currentを付加)
      var src_current = src.replace(/^(.+)(\.[a-z]+)$/, '$1_current$2');
      // 画像のプリロード(先読み込み)
      $('<img>').attr('src', src_current);

      // クラス名「current」が付く場合、
      if ($(this).hasClass('current')) {
         // ハイライト処理
         $(this).attr('src', src_current);
      // クラス名「current」が付かない場合、
      }else {
         // ロールオーバー処理
         $(this).hover(
            function() { $(this).attr('src', src_on); },
            function() { $(this).attr('src', src); }
         );
      }
   });

通常用、ロールオーバー用、ハイライト用の3つの画像を用意します。ロールオーバー用の画像名は通常用に「_on」をつけてください。同様に、ハイライト用の画像名は通常用に「_current」をつけてください。

(例)
通常用画像名:menu.gif
ロールオーバー用画像名:menu_on.gif
ハイライト用画像名:menu_current.gif

ロールオーバー用とハイライト用の画像が同じ場合もあるかと思いますが、その場合は、26行目の「var src_current = src.replace(/^(.+)(\.[a-z]+)$/, “$1_current$2″);」を「var src_current = src.replace(/^(.+)(\.[a-z]+)$/, “$1_on$2″);」に変更してください。