'롤오버' 태그의 글 목록

'롤오버'에 해당되는 글 1건

2010.05.03 JQUERY 이미지 롤오버

JQUERY 이미지 롤오버

웹프로그램관련/JQUERY 2010. 5. 3. 15:07

<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를 공백으로 처리하면 되겠네요