javascript - 将鼠标悬停在导航栏链接上时尝试更改横幅图像

Question

当我将鼠标悬停在列表中的链接上时，我试图将页面顶部的图像更改为另一个图像。任何想法如何做到这一点？

Answer 1

您还可以使用 CSS Sprite： http ://css-tricks.com/158-css-sprites/

看看那个...

它优化了http请求的数量，并且非常易于使用...

Answer 2

有很多方法。这是一个简单的：

<img id="topImg" scr="image.jpg" />

<a href="#" onmouseover="document.topImg.src='image_over.jpg'"
            onmouseout="document.topImg.src='image.jpg'">Rollover</a>

Answer 3

如果使用 jQuery：

$('#tabbar a').hover(
function(){$('#banner').attr('src',"newimg.png')}
function(){$('#banner').attr('src',"oldimg.png')}
)

如果不：

调用鼠标悬停：

document.getElementById('banner').src = 'newimage.png'

呼吁 onmouseout：

document.getElementById('banner').src = 'olgimage.png'

---

您还可以使用精灵并更改背景位置，因此您的资源更少，并且在显示时不需要加载图像