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.

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.

• javascript
• jquery
• mouseevent

Share Follow asked May 23, 2012 at 16:49 colindunncolindunn 3,1631111 gold badges5050 silver badges7373 bronze badges 5

• Ha, I'm not sure. I found this somewhere. There is likely a cleaner way. – colindunn Commented May 23, 2012 at 16:54
• 1 Instead of posting random code that you found, give a thorough description of what you want to do, including the before/after result desired for your attribute value. – user1106925 Commented May 23, 2012 at 16:55
• 1 I'd personally create 2 img objects and swap between them rather than try and change the Url - which relies on browser caching amongst other things – Basic Commented May 23, 2012 at 16:55
• 1 @ Bergi - LOL. @colindunnn Simply do var newSrc = $(this).attr('src'); - Then you can reference the SRC, split it on the underscore, and use whatever came before the underscope. newSrc = newSrc.split('_'); - This will break the SRC into an array. Everything before the underscore will be [0] based, everything after the underscore is [1] based. At this point, you can do $(this).attr('src', 'newSrc[0]') - and this will be what you want. – Ohgodwhy Commented May 23, 2012 at 16:56
• @basic that does sounds better, thanks – colindunn Commented May 23, 2012 at 16:57

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

I would suggest just loading both images and then only showing the one you want. This can all be acplished 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);
    });
  });

​

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

See http://api.jquery./hover/ for more information

http://jsfiddle/dZ3c2/1/

var src;
$("img").hover(function() {
     src = $(this).attr("src");
    $(this).attr("src", "replacementsrc");
},function() {
     $(this).attr("src", src);
});​

Should be able to use .mouseout and reverse the replace.

$('.singleSidebar .subnav img').mouseout(function(){     
    $(this).attr('src', function(index, attr) {     
        return attr.replace(/_anim$/, '');     
    }); 
});