Trying to change banner image when hovering over navbar link

I'm trying to make an image at the top of my page change to another开发者_如何转开发 image when I'm hovering over a link in a list. Any ideas how to do this?

---

There are numerous ways. Here's a simple one:

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

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

---

if using jQuery:

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

if not:

call for onmouseover:

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

call for onmouseout:

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

---

you can also use sprites and change the background position, so you have less resources and the image doesn't need to load while displaying

---

You can also use CSS Sprite : http://css-tricks.com/158-css-sprites/

Just have a look on that...

It optimize the number of http request and it's quite easy to use...