We already learned some basic knowledge of jQuery codes in previous tutorials. It is time to play something interesting with jQuery codes. In this tutorial, the image will be replaced or changed to another image when click on it.

Watch jQuery Replace Image video tutorial on YouTube:

Set Attribute Value of Selected Element with attr() Method

The jQuery attr() method can set the attribute value of selected element. The basic syntax of jQuery attr() Method is shown in the diagram below:

Since the jQuery attr() method can set the attribute value of selected element, we can use this concept to replace the image.

Goal of jQuery Tutorial

In this jQuery tutorial, the boat image will be changed when the mouse pointer click on it.

This is part of the HTML codes of the boat image.

  • The id attribute of the boat image is “boat”.
  • The src attribute of the boat image is “boat.png”.

<img src=”boat.png” alt=”boat” id=”boat” width=”203″ height=”190″ />

Let’s recall what we learned before:

  • The id of the boat layer will display when click on it.
$("#boat").click(function() {

elementName = this.id;

$("#outputText").text("The name is: " + elementName);

}

Return Attribute Value of Selected Element with attr() Method

Let’s learn something new with the jQuery attr() method. The jQuery attr() method also allows to return the value of attribute. The syntax is shown as below:

Example:

The “src” attribute of selected element (i.e. boat.png) will be displayed when click on it.

$("#boat").click(function() {

var srcName = $(this).attr("src");

$("#outputText").text("The name is: " + srcName);

}

We already learned the syntax of jQuery attr() Method. Let’s see how the selected element (boat image) can be replaced with other image when click on it.

Let’s recall part of the HTML codes of the selected element (i.e. boat image).

<img src=”boat.png” alt=”boat” id=”boat” width=”203″ height=”190″ />

Replace Image with jQuery attr() Method

How the following jQuery codes works?

The original boat image (boat.png) will replace with a new image (boat-2.png) when mouse pointer click on it.

$("#boat").click(function() {

newImgSrc = "boat-2.png";

$(this).attr("src", newImgSrc);

}

Result:

This is the original boat image (boat.png) when page load up.

This image has an empty alt attribute; its file name is tut-replace-image-031.jpg

The original boat image (boat.png) will be replaced with a new image (boat-2.png) when mouse pointer click on the boat layer.

Problem:

The above jQuery codes works fine if the image only change one time. In other words the new image (boat-2.png) cannot be changed back to the original image (boat.png).

How to fix this problem?

The following jQuery codes will allow the images to be changed to others whenever click on it.

$("#boat").click(function() {

var srcName = $(this).attr("src");

if (srcName =="boat.png") {
var newImgSrc = $(this).attr("src").replace(srcName, "boat-2.png");
} else {
var newImgSrc = $(this).attr("src").replace(srcName, "boat.png");
}

$(this).attr("src", newImgSrc);

}

The id of the boat layer will display when click on it.

This is the end of jQuery learn beginner tutorial.