javascript mouseover image 스왑 문제

javascript로 마우스 오버 한 이미지를 바꿔 쓰려고하는데 어째서 작동하지 않는 것입니까? 이것이 올바른 방법이라고 생각했습니다.javascript mouseover image 스왑 문제

<li> 
    <a onMouseOver="document.fbi.src=images/facebookIconHover.jpg" onMouseOut="document.fbi.src=images/facebookIcon.jpg" 
href="http://www.facebook.com"> 
    <img src="images/facebookIcon.jpg" NAME="fbi"> 
    </a> 
</li>

출처

2012-06-14 johnsmithy

아니, 인라인 코드! jQuery를 사용할 수 있습니까? – frenchie

예, 지난 세기에 그것을하는 방법입니다. –

나는 jquery와 함께 더 좋은 제안을 할 수도있다. – johnsmithy

그것은 당신이 src 문자열 주위에 따옴표를 넣어 (그 이미지를 가정하는 것은 존재) 할 필요가 같은 모든 보인다.

onMouseOver="document.fbi.src='images/facebookIconHover.jpg'" 
onMouseOut="document.fbi.src='images/facebookIcon.jpg'"

가 나는 내용/스크립트에서 프리젠 테이션을 분리하는대로, 비록 이미지 CSS :hover을 사용하는 것이 좋습니다 것입니다. jQuery를 통해

#element { 
    background-image:url('url1.png'); 
} 
#element:hover { 
    background-image:url('url2.png'); 
}

출처

2012-06-14 16:32:09

나는 우리가 결코 DOM에 손대지 말고 브라우저의 이상 함을 피하기 위해 jQuery를 통해 DOM 조작을 추상화한다고 들었다. – frenchie

아, 그랬어! 감사! – johnsmithy

@frenchie 방금 OP의 우려에 대답하려고합니다. 우리는 또한 웹 사이트 로직을 프리젠 테이션과 섞지 말라는 말을 듣지 만, JQuery는 그것을 확실하게 망쳐 놓는다. 웹은 나쁜 습관으로 산재 해있다. –

$('img[name="fbi"]').hover(function(){ 
    $(this).attr('src','images/facebookIconHover.jpg'); 
},function(){ 
    $(this).attr('src','images/facebookIcon.jpg'); 
});

출처

2012-06-14 16:32:22 j08691

javascript mouseover image 스왑 문제

답변

관련 문제