it/jQuery
마우스오버 됫을때 그림이 바껴 신기신기
하얀나다
2014. 8. 21. 15:52
마우스오버 됫을때 그림이 바껴 신기신기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery test</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script src="../lib/jquery-1.9.1.min.js"></script>
<script src="jquery/jquery.js"></script>
</head>
<body>
<div class="header">
<ul class="menu">
<li><a href="#" class="rollover"><img src="imgs/menu01_off.png" alt="Home" /></a></li>
<li><a href="#" class="rollover"><img src="imgs/menu02_off.png" alt="Products" /></a></li>
<li><a href="#" class="rollover"><img src="imgs/menu03_off.png" alt="Company" /></a></li>
</ul>
</div>
</body>
</html>
$(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');
a.hover(function() {
img.attr('src', src_on);
}, function() {
img.attr('src', src_off);
});
});
});