ロールオーバー - jQuery発展形

jQuery 基礎 授業




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

ロールオーバー-発展形



ソースコード【 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>

<style>
 * {
  margin:0;
  padding:0;
}

.content {
width: 700px;
margin: 20px auto 0;
background-color: #000;
overflow: hidden;
}

li {
list-style-type: none;
float: left;
}

img.top_left {
padding-top: 50px;
padding-left: 40px;
}

img.top_right {
padding-top: 50px;
padding-left: 20px;
}

img.bottom_left {
padding-top: 10px;
padding-bottom: 50px;
padding-left: 40px;
}

img.bottom_right {
padding-top: 10px;
padding-bottom: 50px;
padding-left: 20px;
}
</style>

</head>
<body>

<div class="container">
<div class="content">
<li class="rollover"><img src="img16/01_off.jpg" alt="" class="top_left"></li>
<li class="rollover"><img src="img16/03_off.jpg" alt="" class="top_right"></li>
<li class="rollover"><img src="img16/04_off.jpg" alt="" class="bottom_left"></li>
<li class="rollover"><img src="img16/02_off.jpg" alt="" class="bottom_right"></li>
</div>
</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(\.[^\.]+)$/,'$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);
		});
	});
});
</script>
</body>
</html>

ブラウザで表示【 Chrome 】