2011-10-08 1 views
0

JavaScript를 사용한 롤오버 효과에 대해 질문이 있습니다.JavaScript를 사용하여 롤오버 할 때 이미지 원본을 변경할 수 있습니까?

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

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

어쩌면이 같은 코드 -

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

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

답변

1

mouseovermouseout 이벤트가 필요합니다. 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"); 
+0

예, 그냥 간결에 대한 onmouseout 부분을 떠났다. 내 코드는 당신이 제안한 것과 동일하다고 생각합니다. 여전히 오류가 발생합니다. 기본적으로 롤오버의 이미지는 십자가로 표시됩니다. 나는 그 길은 문제라고 믿습니다. 전체 경로를 언급하는 방법을 알려 주시기 바랍니다. 내 로컬 컴퓨터에서 지금 테스트 중이며 이미지는 웹 페이지 및 스크립트와 같은 폴더에 있고 다른 이미지는 다른 폴더에 있습니다. –

+0

나는 Windows를 사용하고 있고 백 슬래시가있는 경로를 사용한다고 가정합니다. JS에서는 이러한 백 슬래시를 벗어 났으므로'images \ image.png'는'images \\ image.png'가됩니다. 경로에 슬래시를 사용하는 것이 좋습니다 :'images/image.png'. 그것은 항상 작동합니다. – Lekensteyn

+0

감사합니다, @ Lekensteyn. 그게 효과가 있었어. 문제는 내가 이미지 경로로 사용했던 백 슬래시 때문이었습니다. 앞으로 슬래시를 사용했습니다. 고마워. –

관련 문제