jQuery Web Page Design Tutorials

jQuery Replace Image Tutorial (Part 1)

Part 2 of jQuery Replace Image Tutorial

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.

jQuery Video Tutorial

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:

jQuery replace image

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.

jQuery replace image

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 ahown as below:

jQuery attribute

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 got enough knowledge. It's time to see how to replace images with jQuery codes.