CodingMania

CodingMania

2012/9/4

ロールオーバー時、現在地表示時、画像を切り替えします。

hover時は、画像の_offを_onに切り替え
currentのクラスが付いた場合は、画像の_offを_currentに切り替えて表示。

【current表示が無い場合のエラー防止 2012_11_21改訂】

デモページへopen_in_new

JSを読み込みます

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/gnavimg.js"></script>

[gnavimg.js]JavaScript


$(function(){

 $(".mod_Gnavi006 li:not(.current) a").each(function(){
  var a = $(this);
  var img = a.find("img");
  var src_off = img.attr("src");
  var src_on = src_off.replace(/^(.+)_off(\.[^\.]+)$/,"$1_on$2");

  $("<img />").attr("src",src_on);

  a.bind("mouseenter focus", function(){
		img.attr("src", src_on);
		});

  a.bind("mouseleave blur", function(){
		img.attr("src", src_off);
		});
	});
});

 //current表示
$(function() {
  if ($('.mod_Gnavi006 li').hasClass('current')) {
 $(".mod_Gnavi006 li.current a img").attr("src",$(".mod_Gnavi006 li.current a img").attr("src").replace(/^(.+)_off(\.[^\.]+)$/,"$1_current$2"));
  }
});

HTMl

<div class="mod_Gnavi006">
<ul>
<li><a href="#"><img src="img/menu01_off.jpg" width="150" height="45" alt="Menu01" /></a></li>
<li><a href="#"><img src="img/menu02_off.jpg" width="168" height="45" alt="Menu02" /></a></li>
<li class="current"><a href="#"><img src="img/menu03_off.jpg" width="149" height="45" alt="Menu03" /></a></li>
<li><a href="#"><img src="img/menu04_off.jpg" width="149" height="45" alt="Menu04" /></a></li>
</ul>
<!--mod_Gnavi006_end --></div>

CSS

.mod_Gnavi006 ul{
	width:616px;
	overflow:hidden;
	position:relative;
}
.mod_Gnavi006 ul li{
	height:45px;
	float:left;
}
.mod_Gnavi006 ul li img{
	display:block; /* IE6隙間防止 */
}
.mod_Gnavi006 ul li a{
	display:block;
}

© CodingMania.net