(소스)jqury 롤오버 버튼 쉽게 만들기

//제이쿼리 선언

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

 

//이미지 class="rollover" 주면 자동 롤오버 class="rollover active" 마우스 오버되어있을떄 효과

// 주의사항 이미지명 뒤에 _off,_on으로 구분 주어야함
<img src="image01_off.jpg" class="rollover" />
<img src="image02_off.jpg" class="rollover active" />
<img src="image03_off.jpg" class="rollover" />
<img src="image04_off.jpg" class="rollover" />

 

//스크립트는 하단에 호출 해주어야한다
<script type="text/javascript">
if ( $('img').hasClass('active') ){
$('img.active').attr('src', $('img.active').attr('src').split('_off.')[0] + '_on.' + $('img.active').attr('src').split('_off.')[1]);
}
$('img.rollover').mouseover(function(){
if ( !$(this).hasClass('active') ){
var image_name = $(this).attr('src').split('_off.')[0];
var image_type = $(this).attr('src').split('off.')[1];
$(this).attr('src', image_name + '_on.' + image_type);
}
}).mouseout(function(){
if ( !$(this).hasClass('active') ){
var image_name = $(this).attr('src').split('_on.')[0];
var image_type = $(this).attr('src').split('_on.')[1];
$(this).attr('src', image_name + '_off.' + image_type);
}
});
</script>