[jQuery] 이미지 변경 replace 사용!

마우스가 접근했을 때 다른 이미지로 교체하는 방법

Class를 이용하는 방법

1. img태그에 class를 기입한다.

   <img src="img_off.png" class="rollover" />

2. jQuery로 변경을 한다.

   $(".rollover").on('mouseenter', function() {
        $(this).attr("src", $(this).attr("src").replace("_off","_on"));
   }).on('mouseleave', function() {
        $(this).attr("src", $(this).attr("src").replace("_on", "_off"));
   });

.index()를 이용하는 방법

1. 리스트내에서 순서를 부여해 해다하는 객체만 선택하기 위해, 각각의 index를 가져올 수 있다.

   var idx = $('.productsList').children().index(this);

2. 가져온 인덱스 값을 이용하여, 객체를 호출한다.

   var $img = $('.tab-list').find('img:eq(idx)');
   $img.attr("src", $img.attr("src").replace("_on","_off"))