How to Change image src Attribute using jQuery

Every image displayed on a web page has a src (short for source) attribute that indicates a path to a graphic file; in other words, it points to an image on a web server. If you change this property to point to a different graphic file, the browser displays the new image instead. Say you have an image on a page and you assign it an ID of photo. Using jQuery, you can dynamically change the src attribute for an image.

For example, suppose you have an image on a page and that you’ve assigned it an ID of photo. The HTML might look something like this:

<img src="images/image.jpg" width="100" height="100" id="photo">

To swap in another image file, you just use the attr() function to set the tag’s src property to a new file, like this:

$('#photo').attr('src','images/newImage.jpg');

Changing an image’s src attribute doesn’t change any of the <img> tag’s other attributes, however. For example, if the alt attribute is set in the HTML, the swapped-in image has the same alt text as the original. In addition, if the width and height attributes are set in the HTML, changing an image’s src property makes the new image fit inside the same space as the original. If the two graphics have different dimensions, then the swapped-in image will be distorted.

In a situation like rollover images in a navigation bar, the two images will most likely be the same size and share the same alt attribute, so you don’t get that problem. But you can avoid the image distortion problem entirely by simply leaving off the width and height property of the original image in your HTML. Then when the new image is swapped in, the web browser displays the image at the dimensions set in the file.
Another solution is to first download the new image, get its dimensions, and then change the src, width, height, and alt attributes of the <img> tag:

var newPhoto = new Image();
newPhoto.src = 'images/newImage.jpg';
var photo = $('#photo');
photo.attr('src',newPhoto.src);
photo.attr('width',newPhoto.width);
photo.attr('height',newPhoto.height);

The key to this technique is line 1, which creates a new image object. To a web browser, the code new Image()says, “Browser, I’m going to be adding a new image to the page, so get ready.” The next line tells the web browser to actually download the new image. Line 3 gets a reference to the current image on the page, and lines 4–6 swap in the new image and change the width and height to match the new image.

The jQuery attr() function can set multiple HTML attributes at once. Just pass an object literal that contains each attribute name and new value. You could write the jQuery code from above more succinctly, like this:

var newPhoto = new Image();
newPhoto.src = 'images/newImage.jpg';
$('#photo').attr({
src: newPhoto.src,
width: newPhoto.width,
height: newPhoto.height
});

Normally, you’d use this image swap technique in conjunction with an event handler. For example, you can make an image change to another image when a visitor mouses over the image. This rollover effect is commonly used for navigation bars. However, you can change an image in response to any event: For example, you can make a new photo appear each time an arrow on a page is clicked, like a slideshow.