[jQuery] jQuery를 이용한 이미지의 마우스 오버

작업을 하다보면 이미지에 마우스오버 효과를 줘야 할 때가 많은데, 일일히 onmouseover 와 onmouseout 을 써서 따로 지정해주는 것도 참 일이다. 일단 코드가 길어져서 가독성에 떨어지게 되고 파일의 갯수가 많다면,,, 음,,, 용량도 커지지 않을까? 그리고 따로 파일마다 id 를 준다거나 각각 함수를 만들어서 사용하는 것도 정말 번거로운 일이다. 이 모든 것을 jQuery가 해결해주는 듯 싶다.

사용법을 이야기 해볼까? 우선 jQuery 를 로드해야 한다.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

그 다음에는 아래의 코드를 모든 페이지에서 동작하게 한다.

<script type="text/javasxript">
$(".image_rollover").mouseover(function(){
     var temp = $(this).attr("src");
     var length = temp.length;
     var file_name = temp.substring(0, length-6);
     var status = temp.substring(length-6).substring(0,2); //ff
     var file_type = temp.substring(length-6).substring(3);
     if (status == "ff") $(this).attr("src", file_name + "n." + file_type);
}).mouseout(function(){
     var temp = $(this).attr("src");
     var length = temp.length;
     var file_name = temp.substring(0, length-6);
     var status = temp.substring(length-6).substring(0,2); //on
     var file_type = temp.substring(length-6).substring(3);
     if (status == "on") $(this).attr("src", file_name + "off." + file_type);

});

</script>

이미지의 네이밍을 잘 해야 하는데,, 파일명 맨 뒤에 _(언더바)를 붙이고 오버되었을때 "on" 아웃되었을 때 "off" 라고 해서 이름을 설정해야 한다. 예를 들자면, image_on.gif , image_off.gif 이렇게 말이다.

마지막으로 이미지에 "image_rollover"라는 클래스를 모두 적용해주면 설정된 모든 이미지에서 동작하게 된다.

<a href="#"><img src="img/abc01_off.gif" class="image_rollover" /></a>

참 좋은 세상이다.