当鼠标悬停在导航条链接上时，试图更改横幅图像

Trying to change banner image when hovering over navbar link

本文关键字：图像 悬停 鼠标 导航 链接      更新时间：2023-09-26

当我在列表中的链接上方悬停时，我试图使页面顶部的图像更改为另一个图像。有什么办法吗?

有很多方法。下面是一个简单的例子:

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

如果使用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'

你也可以使用精灵和改变背景位置，这样你有更少的资源和图像不需要加载时显示

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

看一下……

它优化了http请求的数量，它很容易使用…

相关文章：