창수가 들려주는 소박한 이야기

제가 실무에서 자주 사용하는 마우스 오버 효과 제이쿼리입니다. 실제로 이것은 인터넷에서 검색하면 나오는 코드인데 상당히 유용합니다. 우선 소스를 살펴보겠습니다.

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'이 있기만 하면 무조건 적용됩니다.