JavaScript를 사용하여 롤오버 할 때 이미지 원본을 변경할 수 있습니까?

Question

JavaScript를 사용한 롤오버 효과에 대해 질문이 있습니다.

나는 onmouseover이 JS를 사용하여 처리 될 때 기본 롤오버를 달성하기 위해 CSS 오프셋의 도움으로 이미지 스프라이트 (이미지가 다른 이미지가있는 이미지)를 사용할 수 있음을 읽었습니다. 또한 위의 효과를 얻기 위해 JS (className)를 사용하여 클래스 자체를 변경하는 가능성에 대해 읽었습니다.

내 질문은 JavaScript를 사용하여 이미지 src 자체를 수정하여 롤오버 효과를 얻을 수 있습니까?

어쩌면이 같은 코드 -

document.getElementByID("button1").onmouseover = rolloverFunction; 
function rolloverFunction(){ 
this.src = "button1-image2.png"; 
} 

나는 이미지의 SRC가 롤오버에 따라 수정 될 수 있는지 확인하기 위해이 같은 것을 입력,하지만이 작동하지 않습니다. 내가 어디로 잘못 가고 있는지 알려주시겠습니까?

Answer 1

mouseover 및 mouseout 이벤트가 필요합니다. mouseover은 이미지를 떠날 때 mouseout에서 마우스를 가져 가면 트리거됩니다. 얻을 것이 일반 팔자 '에 JS 사용 :

<img src="default.png" id="image" alt=""> 

<script> 
var image = document.getElementById("image"); 
image.onmouseover = function() { 
    this.src = "rollover.png"; 
}; 
image.onmouseout = function() { 
    this.src = "default.png"; 
}; 
</script> 

을 또는 공통 기능을 사용하면 URL을 중복되지 않도록하기 :

function rollover_effect(img_elm, rollover_src) { 
    var default_src = img_elm.src; 
    img_elm.onmouseover = function() { 
     img_elm.src = rollover_src; 
    }; 
    img_elm.onmouseout = function() { 
     img_elm.src = default_src; 
    }; 
} 
rollover_effect(document.getElementByID("image"), "rollover.png");