JavaScript的mouseover圖像交換問題

我想換出一個與JavaScript的懸停圖像，但它似乎並沒有工作，任何想法爲什麼？我認爲這是做到這一點的正確方法。JavaScript的mouseover圖像交換問題

<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的圖像，雖然，因爲它從內容/腳本分離開來。

#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肯定會把這個問題搞砸了。網絡散佈着不好的做法。 –

通過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圖像交換問題

回答

相關問題