Question

I’m trying to append a string of text to the src attribute of an image on mouseover and then remove that string on mouseout. Right now I have it half working:

Javascript

$('.singleSidebar .subnav img').mouseover(function(){
    $(this).attr('src', function(index, attr) {
    return attr.replace(/\.[^.]*$/, '_anim$&');
    });
});

I found this code somewhere else and so I’m not exactly sure how to modify it to remove the string _anim on mouseout.

Answer 1

I would suggest just loading both images and then only showing the one you want. This can all be accomplished with CSS.

Give one image a class of “animated” and the other class of “nonanimated”. Add this CSS to handle the onhover change:

    .singleSidebar .subnav img.animated,
    .singleSidebar .subnav img.nonanimated:hover
    {
        display: none;
    }
    .singleSidebar .subnav img.animated:hover,
    .singleSidebar .subnav img.nonanimated
    {
        display: block
    }

This will work better because the browser will load the image right away instead of when you hover your mouse, it’s also a bit cleaner IMO

EDIT
Ah, if you need them to start playing on hover then you will need to do it your way. Try something like this:

$('.singleSidebar .subnav img').each(function(e){
    var src = $(this).attr('src');
    $(this).hover(function(){
      $(this).attr('src', src.replace('.gif', '_anim.gif'));
    }, function(){
      $(this).attr('src', src);
    });
  });

​