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

Question

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

Answer 1

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

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

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

Answer 2

如果使用jQuery：

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

如果不是：

呼吁onmouseover：

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

呼吁onmouseout：

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

---

你也可以使用精灵并改变背景位置，这样你就可以减少资源，并且在显示时不需要加载图像

Answer 3

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

看看那个......

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