<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){
$('.rollover').hover(function() {
var currentImg = $(this).attr('src');
$(this).attr('src', $(this).attr('hover'));
$(this).attr('hover', currentImg);
}, function() {
var currentImg = $(this).attr('src');
$(this).attr('src', $(this).attr('hover'));
$(this).attr('hover', currentImg);
});
});
</script>
</head>
<body>
<a href="#"><img src="off.gif" hover="on.gif" width="10" height="10" class="rollover"></a>
</body>
</html>
대략 위에
img 테그에 src와 hover 에 이미지 정보 삽입후 class 에 rollover 삽입 하면 간단하게 이미지 롤오버가 완성됩니다.
이미지 유지의 경우 class를 공백으로 처리하면 되겠네요
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){
$('.rollover').hover(function() {
var currentImg = $(this).attr('src');
$(this).attr('src', $(this).attr('hover'));
$(this).attr('hover', currentImg);
}, function() {
var currentImg = $(this).attr('src');
$(this).attr('src', $(this).attr('hover'));
$(this).attr('hover', currentImg);
});
});
</script>
</head>
<body>
<a href="#"><img src="off.gif" hover="on.gif" width="10" height="10" class="rollover"></a>
</body>
</html>
대략 위에
img 테그에 src와 hover 에 이미지 정보 삽입후 class 에 rollover 삽입 하면 간단하게 이미지 롤오버가 완성됩니다.
이미지 유지의 경우 class를 공백으로 처리하면 되겠네요
'웹프로그램관련 > JQUERY' 카테고리의 다른 글
JQUERY MARQUEE(마퀴) 효과 (0) | 2010.05.28 |
---|