Using jQuery to change image source URL

Question

I have two images, one transparent:

http://www.example.com/image-trans.png

And another one with a background:

http://www.example.com/image.png

I am trying to use jQuery to change the src of the image from image-trans.png (original value) to image.png when a certain event is triggered.

I am able to accomplish this by typing the src directly into my jQuery code:

$("img.nav51").attr("src","http://example.com/image.png");

However, I am trying to do this without typing the URL directly into my jQuery, as the URL is dynamically set elsewhere, and is subject to change.

Here is what I am trying, but it does not do anything for me:

$('img.nav51').attr("src").replace("-trans.png", ".png");

Any suggestions?

Replace doesn't modify the string you are "replacing." Rather it returns a new string which you must then set as the new src attribute. — Jason
– Jason, Commented Jul 30, 2014 at 14:51

Kevin Labécot · Accepted Answer · 2014-07-30 14:49:29Z

4

To set/update the attribute you must pass the new value in the second parameter.

Try this :

var originalSrc = $('img.nav51').attr("src");
$('img.nav51').attr("src", originalSrc.replace("-trans.png", ".png"));

answered Jul 30, 2014 at 14:49

Kevin Labécot

1,99513 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SpYk3HH Over a year ago

Or he could just use this.src = this.src.replace("-trans.png", ".png"); I'm all for all jQuery, but sometimes, the simplest solution is Vanilla. That is, if this is in a click event of the image

Kevin Labécot Over a year ago

Depending of his needs, yes.

Vennik · Accepted Answer · 2014-07-30 14:49:27Z

1

You have to set it to replace it:

$('img.nav51').attr("src", $('img.nav51').attr("src").replace("-trans.png", ".png"));

answered Jul 30, 2014 at 14:49

Vennik

5653 silver badges11 bronze badges

Comments

Spokey · Accepted Answer · 2014-07-30 15:02:52Z

0

$('img.nav51').attr('src', function(){ 
     return this.src.replace("-trans.png", ".png"); 
});

answered Jul 30, 2014 at 15:02

Spokey

11k2 gold badges31 silver badges44 bronze badges

Collectives™ on Stack Overflow

Using jQuery to change image source URL

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related