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/