JQuery change the value of an <img src="" by ID

Question

I need some simple JQuery code so I can change the src value of a specific img.

It's currently:

<img id="myImage" src="image1.gif" />

and I need to change it to:

<img id="myImage" src="image2.gif" />

using JQuery.

Answer 1

Using: $(function(){ ... });

You can use:

$('#id').attr('src', 'newImage.jpg');

to change the image source immediately.

---

Alternatively, you can use jQuery animations to change an image.

JS

$("#id1").fadeOut();
$("#id2").delay(200).fadeIn();

HTML

<div>
    <img id='id1' src='one.jpg'>
    <img id='id2' src='two.jpg'>
</div>

(Don't forget to change the CSS of #id2 and put display: none as initial state).

Answer 2

That's elementary, use jQuery attr...

$('img#myImage').attr('src', 'image2.gif');