매우 간단한 분리 롤오버 이미지 스왑

아주 간단한 자바 스크립트 롤오버 효과를 만듭니다. 마우스 오버 한 단어로 페이지의 이미지를 바꿉니다. mouseOut 및 원래 이미지를 반환합니다. 자바 스크립트를 처음 접했을 때 초기 스왑이 발생하기에 충분할 때 나는 감격했습니다. mouseOut에서 원본 이미지로 돌아 오는 방법은 나를 피합니다. 아기 코드 : 위의매우 간단한 분리 롤오버 이미지 스왑

<head> 
<script> 
function mOver(obj) 
{ 
document.getElementById("img1").src="image2.jpg"; 
} 

function mOut(obj) 
//not certain what goes here….. 
</script> 
</head> 

<body> 

    <div> 
    <p1 onmouseover="mOver(this)" onmouseout="mOut(this)"> ROLLOVER </p1> 
    </div> 

    <div id="image"> 
    <img id="img1" src="image1.jpg" alt="imag1"> 
    </div> 

</body>

나의 이해하십시오 P1 태그 롤오버 이미지 전환을 위해 원본 이미지의 소스 속성 전환 (DOM을 사용하여) 함수를 호출하는 mouseOver 이벤트 핸들러가 발생합니다. 스왑 된 이미지 (문서에없는 이미지)는 적절한 ID로 처리 할 수 없으므로 mouseOut에서 역순으로 처리 할 수 없습니다. 이 작업을 수행하는 방법은 여러 가지가있을 것이라고 확신합니다. 누군가가이 젊은이를 도울 수 있다면, 나는 그것을 감사 할 것입니다. 나는 매우 관심이 Javascript에서 내 지식을 발전.

는

출처

2013-12-20 innervibrance

는

시퀀스의 이해가 올바른지 : 이벤트 발생, 이벤트 기능에 의해 처리되고, 기능을 사용하면 이미지 .src을 변경할 때

하지만하지 변경 ID 할 이미지의 소스를 변경 - DOM 요소를 <img> 남아 동일한 소스 만 변경되므로 원래 ID로 액세스 할 수 있습니다.

function mOut() { document.getElementById("img1").src="image1.jpg"; }

출처

2013-12-20 05:06:46

물론 ... 감사합니다! – innervibrance

도움이 되니 기쁩니다. 유용 할 경우 솔루션을 답변으로 표시하십시오. –

매우 간단한 분리 롤오버 이미지 스왑

답변

관련 문제