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

(소스)jqury 롤오버 버튼 쉽게 만들기 > 개발자팁

개발자팁

개발과 관련된 유용한 정보를 공유하세요.
질문은 QA에서 해주시기 바랍니다.

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

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

첨부파일

jquryroll.html (1.2K) 208회 다운로드 2012-03-21 10:36:05

본문

//제이쿼리 선언

//이미지 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>

이렇게 하면 쉽게 롤오버 버튼을 제작할수있습니다~

알고계셧다면 죄송..