2012/03/12 02:17
제가 실무에서 자주 사용하는 마우스 오버 효과 제이쿼리입니다. 실제로 이것은 인터넷에서 검색하면 나오는 코드인데 상당히 유용합니다. 우선 소스를 살펴보겠습니다.
jQuery(document).ready(function(){
jQuery(".over").mouseover(function(){
jQuery(this).attr("src",jQuery(this).attr("src").replace("_off","_on"));
});
jQuery(".over").mouseout(function(){
jQuery(this).attr("src",jQuery(this).attr("src").replace("_on","_off"));
});
});
빨간색으로 표시한 부분은 class="over"인 img 태그에 마우스를 올리면 '_off'인 이미지 파일이 '_on'으로 바뀌는 src 속성값으로 설정됨을 의미합니다. 그리고 파란색으로 표시한 부분은 class="over"인 img 태그에서 마우스가 벗어나면 '_on'인 이미지 파일이 '_off"로 바뀌는 src 속성값으로 설정됨을 뜻합니다.
참고로 이 코드는 gif, jpg, png와 같은 이미지 파일 형식에 상관없이 이미지 파일명에서 '_on'과 '_off'이 있기만 하면 무조건 적용됩니다.
jQuery(document).ready(function(){
jQuery(".over").mouseover(function(){
jQuery(this).attr("src",jQuery(this).attr("src").replace("_off","_on"));
});
jQuery(".over").mouseout(function(){
jQuery(this).attr("src",jQuery(this).attr("src").replace("_on","_off"));
});
});
빨간색으로 표시한 부분은 class="over"인 img 태그에 마우스를 올리면 '_off'인 이미지 파일이 '_on'으로 바뀌는 src 속성값으로 설정됨을 의미합니다. 그리고 파란색으로 표시한 부분은 class="over"인 img 태그에서 마우스가 벗어나면 '_on'인 이미지 파일이 '_off"로 바뀌는 src 속성값으로 설정됨을 뜻합니다.
참고로 이 코드는 gif, jpg, png와 같은 이미지 파일 형식에 상관없이 이미지 파일명에서 '_on'과 '_off'이 있기만 하면 무조건 적용됩니다.
'Javascript / jQuery' 카테고리의 다른 글
| 마우스 오버 효과 (0) | 2012/03/12 |
|---|---|
| label 효과를 구현하는 여러 가지 방법(2011년 2월에 정리한 자료) (0) | 2011/12/21 |