Jquery selector: How to: change the src attribute of an image tag on the hover link

advertisements

I need to change the src attribute of the image when the link is being hover on

<div class="clear span-33 last" id="navigation">
  <div class="hicon span-1"><a href="#" title="Homepage"><img src="../Assets/images/home.png" /></a></div>
</div>

Also change it to default when the link is not hovered on...


You really should look into using CSS sprites for switching backgrounds on hover. But if you need to do this in jQuery, something like this should do it. Just change the over source image to your liking (also preloads the hover image):

var link = $('a'),
    img  = link.children('img'),
    orig = img.attr('src'),
    over = 'over.png',
    temp = new Image();

temp.src = over; // preloads

link.hover(function() {
    img.attr('src',over);
},function() {
    img.attr('src',orig);
}