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

2014/11/16

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

2015/06/07 追記：より汎用性のある記述法があった。

<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に切り替える。

フェード効果ありの sample2 についてはソースを見てください。

参照サイト:
http://www.webcreatorbox.com/tech/jquery-tips20/
http://klutche.org/archives/323/

Ida Qitailang