2012-11-04 4 views
0

이것은 내가 지금까지 가지고있는 것입니다. 나는 엄청난 양의 자바 스크립트 비디오를보고 있었고, 나는 그 이미지를 흉내 냈다고 느낍니다. 그러나 이것은 여전히 ​​내가 원하는대로 기능하지 않습니다.자바 스크립트 mouseover 이미지 오류

이상으로 로고 1에서 로고 2로 바뀝니다. 이것은 숙제입니다. 그러나 숙제가 중요하기 때문에 어떤 도움이나지도라도 부탁드립니다.

</head> 

<body> 
<p> 
<div> 
<script type="text/javascript"> 
// Pre load images for rollover 
function imgOver(id) 
{ 
    document.getElementById(id).src="logo1.jpg"; 
} 

function imgOut(id) 
{ 
    document.getElementById(id).src="logo2.jpg"; 
} 

</script> 
<a href="#" onmouseover="imgOver('logo1');" onmouseout="imgOut('logo2')"> 
<img alt="logo" height="150" src="images/Logo1.jpeg" width="110" /> 
</a> 
</div> 
</body> 

</html> 

새 코드는 여전히 작동하지 않습니다! ID 결코 변화하지 않기 때문에 = (

</head> 

<body> 
<div> 
<p> 
<script type="text/javascript"> 
// Pre load images for rollover 
function imgOver() 
{ 
    document.getElementById('logo').src="images/logo1.jpg"; // ensure correct image path 
} 

function imgOut() 
{ 
    document.getElementById('logo').src="images/logo2.jpg"; // ensure correct image path 
} 
</script> 
<a href="#" onmouseover="imgOver('logo1');" onmouseout="imgOut('logo2')"> 
<img alt="logo" height="150" src="images/Logo1.jpeg" width="110" /> 
</a> 
</p> 
</div> 
</body> 

</html> 
+0

또한 stackoverflow에 많은 예제가 있지만 다른 방법으로 가르쳐 왔지만 아직 이해하지 못했습니다. – CaptainTeancum

+0

다시 마우스 오버시 변경되지 않습니까? – PitaJ

+0

그게 아니라 ... 나는 크롬과 파이어 폭스에서 테스트 중이지만 그냥 정적으로 앉아있다. – CaptainTeancum

답변

1

당신은 이미지 요소의 당신의 imgOverimgOut 기능에 ID, 당신의 기능을 변경해야합니다 패스 필요가 없다 : 두 번째

function imgOver() { 
    document.getElementById('logo').src="logo1.jpg"; // ensure correct image path 
} 

function imgOut() { 
    document.getElementById('logo').src="logo2.jpg"; // ensure correct image path 
} 

, 올바른을 지정할 수 있도록 logo1.jpglogo2.jpg 경로 : 예 : 원래 HTML 양식을 사용하면 images/logo1.jpgimages/logo2.jpg을 사용해야합니다. 각기.


이미지 요소에 ID가 있어야합니다. <img id="logo" alt="logo" height="150" src="images/Logo1.jpeg" width="110" />

전체 소스 :

<script type="text/javascript"> 
function imgOver() { 
    document.getElementById('logo').src="images/logo1.jpg"; // ensure correct image path 
} 
function imgOut() { 
    document.getElementById('logo').src="images/logo2.jpg"; // ensure correct image path 
} 
</script> 
<a href="#" onmouseover="imgOver()" onmouseout="imgOut()"> 
    <!-- note the id="logo" part below --> 
    <img id="logo" alt="logo" height="150" src="images/Logo1.jpeg" width="110" /> 
</a> 
+0

편집을 작성하십시오. =) – CaptainTeancum

+0

업데이트 된 답변을 확인하십시오. 이미지 요소에 ID (= 로고)가 있어야합니다. – techfoobar

+0

전체 소스를 게시 했으므로 시작해야합니다. – techfoobar

2

이 시도 : 이전

<script type="text/javascript"> 
// Pre load images for rollover 
function imgSwap(imgSrc) 
{ 
    document.getElementById('logo').src = "images/"+imgSrc+".jpeg"; 
} 

</script> 
<a href="#" onmouseover="imgSwap('Logo1');" onmouseout="imgSwap('Logo2')"> 
<img id="logo" alt="logo" height="150" src="images/Logo1.jpeg" width="110" /> 
</a> 

, 당신 우리가 사용되지 않은 id를 전달하고 있습니다. 또한 src는 images/ 디렉토리를 가리켜 야합니다.