UL画像メニューのマウスオーバー画像を切り替える

sample、sample2(フェード効果あり)

<ul id="menu">
  <li class=active><a href="#"><img src="images/menu_01_off.gif" width=360 height=40 /></a></li>
  <li><a href="#"><img src="images/menu_02_off.gif" width=360 height=40 /></a></li>
  <li><a href="#"><img src="images/menu_03_off.gif" width=360 height=40 /></a></li>
  <li><a href="#"><img src="images/menu_04_off.gif" width=360 height=40 /></a></li>
  <li><a href="#"><img src="images/menu_05_off.gif" width=360 height=40 /></a></li>
</ul>

すべてのメニュー項目について、非マウスオーバー時の画像(〜〜_off.gif)とマウスオーバー時の画像(〜〜_on.gif)を用意しておき、マークアップでは初期値として、すべての画像を非マウスオーバー時の画像にしておく(〜〜_off.gif)。 

ul#menu{
  list-style:none;
}
ul#menu li{
  margin-bottom:10px;
}
img{
  border:none;
}
a:focus { /*FireFox用*/
  outline: none;
}
a img{ /*FireFox用*/
  border: none;
}

 <script type = "text/javascript">
  $(document).ready(function() {
  $('#menu li.active img').each(function(){
    $(this).attr('src', $(this).attr('src').replace('_off', '_on'));
  });
  $('#menu img').hover(function(){
    $(this).attr('src', $(this).attr('src').replace('_off', '_on'));
    }, function(){
    if (!$(this).parents("li").hasClass('active')) {
      $(this).attr('src', $(this).attr('src').replace('_on', '_off'));
    }
  });
});
</script>

jQueryのコードの意味は、

1. <li class=active>で括られているimgはマウスオーバー時の画像に切り替えておく。
2. マウスオーバーしたとき、〜〜_on.gifに切り替える。
3. マウスが離れるとき、親要素の li が active クラスでなければ、〜〜_off.gifに切り替える。

参照サイト:

http://www.webcreatorbox.com/tech/jquery-tips20/
http://klutche.org/archives/323/