jQuery를 사용하여 롤오버시 이미지 소스 변경

질문 : jQuery를 사용하여 롤오버시 이미지 소스 변경

---

몇 개의 이미지와 롤오버 이미지가 있습니다. jQuery를 사용하여 onmousemove / onmouseout 이벤트가 발생할 때 롤오버 이미지를 표시하거나 숨기고 싶습니다. 내 모든 이미지 이름은 다음과 같이 동일한 패턴을 따릅니다.

원본 이미지 : Image.gif

롤오버 이미지 : Imageover.gif

onmouseover 및 onmouseout 이벤트에서 각각 이미지 소스 의 "over" 부분을 삽입하고 제거하고 싶습니다.

jQuery를 사용하여 어떻게 할 수 있습니까?

답변

---

준비 상태로 설정하려면 :

$(function() {
    $("img")
        .mouseover(function() { 
            var src = $(this).attr("src").match(/[^\.]+/) + "over.gif";
            $(this).attr("src", src);
        })
        .mouseout(function() {
            var src = $(this).attr("src").replace("over.gif", ".gif");
            $(this).attr("src", src);
        });
});

URL 이미지 소스를 사용하는 경우 :

$(function() {
        $("img")
            .mouseover(function() {
               var src = $(this).attr("src");
               var regex = /_normal.svg/gi;
               src = this.src.replace(regex,'_rollover.svg');
               $(this).attr("src", src);

            })
            .mouseout(function() {
               var src = $(this).attr("src");
               var regex = /_rollover.svg/gi;
               src = this.src.replace(regex,'_normal.svg');
               $(this).attr("src", src);

            });
    });

출처 : https://stackoverflow.com/questions/540349/change-the-image-source-on-rollover-using-jquery