ロールオーバー - jQuery基本形

jQuery 基礎 授業




☆★データーでの確認★☆

ロールオーバー - jQuery基本形


  • 画像の名前に[ _on ] と [ _off ]をつけ自動置換させる
  • 画像置換範囲を[ class="rollover" ]で個別に指定



ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ロールオーバー-基本形</title>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

</head>
<body>

<div class="header">
<ul class="nav">
<li><a href="#" class="rollover"><img src="img2/btn_off.png" alt="Home"></a></li>
<li><a href="#" class="rollover"><img src="img2/btn02_off.png" alt="Products"></a>
<li><a href="#" class="rollover"><img src="img2/btn03_off.png" alt="Company"></a>
</ul>
</div>

<script>
$(function() {
	$('.rollover').each(function() {
		var a = $(this);
		var img = a.find('img');
		var src_off = img.attr('src');
		var src_on = src_off.replace('_off', '_on');
		$('<img>').attr('src', src_on);
		a.hover(function() {
			img.attr('src', src_on);
		},function() {
			img.attr('src', src_off);
		});
	});
});
</script>
</body>
</html>

ブラウザで表示【 Chrome 】