Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to change the src attribute of an img element in JavaScript / jQuery?
There are different methods to change the path of an image given to the src attribute of an img element in HTML document using the JavaScript as well as jQuery.
Method of changing the src attribute of an img element using JavaScript −
Use the src property in JavaScript.
Methods of changing the src attribute of an img element using jQuery −
Using attr() method
Using prop() method
Let us discuss each of the above listed methods of changing the src of an img element one by one in details −
Using src property in JavaScript
JavaScript allow us to use the src property to get the already assigned value to it as well as to update or change the value of the same attribute. It is very common method of changing the value of src attribute of an img element.
Syntax
Following syntax will explain you how to use the src property to change the value of the src attribute of an img element in JavaScript −
Selected_image_element.src = " new value ";
Let us understand the practical implementation of this method with the help of code example −
Algorithm
Step 1 − In the first step, we will add a img element with a src attribute associated with it, whose value we will change later using the src property in JavaScript.
Step 2 − In this step, we will add a button element with the onclick event associated with it, which call a function when user click the button to change the src of the image.
Step 3 − In the next step, we will define a JavaScript function, in which we will grab the img element using its ID and then change the src attribute using src property and toggle between two images.
Step 4 − In the last step, we will assign the function to the onclick event defined in the last step to see the changes on user screen.
Example
Below example will explain you how to use the src property to change the src attribute of an img practically in JavaScript −
<html>
<body>
<h2>Change the src attribute of an img element</h2>
<p id = "upper">The image shown below will be changed once you click the button.</p>
<img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1GyK6fiCHCRcizXh_dXsFBA5Idw7XayKizQ&usqp=CAU" id = "image"> <br> <br>
<button id = "btn" onclick = "changeSrc()">Click to change the Image</button>
<p id = "result"> </p>
<script>
var result = document.getElementById("result");
var upper = document.getElementById("upper");
function changeSrc() {
var img = document.getElementById('image');
if (img.src == "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1GyK6fiCHCRcizXh_dXsFBA5Idw7XayKizQ&usqp=CAU") {
img.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoLnvRnTNP2rojd7e9b_Ilw5zZkSlPotSPIA&usqp=CAU";
result.innerHTML += " The src of above img is changed from <b> Link 1 </b> to " + " <b> Link 2 </b> <br>";
}
else {
img.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1GyK6fiCHCRcizXh_dXsFBA5Idw7XayKizQ&usqp=CAU";
result.innerHTML += " The src of above img is changed from <b> Link 2 </b> to " + " <b> Link 1 </b> <br>";
}
upper.innerHTML = " The image shown previously is replaced by some other image as <b> src attribute of img is changed. </b> <br> ";
}
</script>
</body>
</html>
In this example, we have used the src property in JavaScript to change the src attribute of an img element in the HTML document. Here, we are toggle between two images every time we click the button.
Using attr() method in jQuery
We can also change the src attribute using the attr() method in JavaScript.
attr() method − The attr() method takes two parameters, where the first parameter will be the name of attribute whose value we want to change in form of string and another will be the new value that we wan t to assign to the attribute.
Syntax
Following syntax will explain you the implementation of the attr() method with the parameters −
attr(" attribute_name ", " new_value ");
Let us understand the implementation of this method in details with the help of code example.
Algorithm
Step 1 − In the first step, we will add the jQuery link in the head element of the document inside the src of the script element
Step 2 − In this step, we will add a img element with a src attribute which will be changed later using the attr() method in jQuery.
Step 3 − In the third step, we will add a button element which will be given an onclick event and a function later using jQuery.
Step 4 − In the next step, we will grab each element using the “$” syntax of jQuery and perform tasks on each one of them.
Step 5 − In the last step, we will assign an onclick even to the button using the on() method in jQuery, so that it can call the function given inside it when the button is clicked and the changes are visible to the user.
Example
Below example will illustrate the use of the attr() method in jQuery to change the src attribute of an img element −
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<h2>Change the src attribute of an img element using jQuery</h2>
<p id = "upper">The image shown below will be changed once you click the button.</p>
<img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1GyK6fiCHCRcizXh_dXsFBA5Idw7XayKizQ&usqp=CAU" id = "image"> <br> <br>
<button id = "btn">Click to change the Image</button>
<p id = "result"> </p>
<script>
$("#btn").on('click', function (e) {
$('#image').attr("src", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoLnvRnTNP2rojd7e9b_Ilw5zZkSlPotSPIA&usqp=CAU");
$("#result").html(" The src of above img is changed from <b> Link 1 </b> to " + " <b> Link 2 </b> <br>");
$("#upper").html(" The image shown previously is replaced by some other image as <b> the src attribute of img is changed. </b> <br> ");
});
</script>
</body>
</html>
Using the prop() method in jQuery
Similar to the attr() method jQuery also provide us a prop() method to change the value of any attribute to a new value.
prop() method − The prop() method can be used as we used the attr() method in previous example. It takes property name and the new value to be assigned as parameters.
We can set the value to the single as well as multiple properties using the prop() method.
Syntax
Following syntax will show you how you can use the prop() method for different purposes −
Changing value of a particular attribute −
prop(" attribute_name ", " new_value ");
Changing values of multiple attributes −
prop({ attribute_name: new_value, attribute_name: new_value });
In the second syntax, we are giving the multiple attributes with their new values associated with them at same time.
Let us understand the use of prop() method in details with the help of the code example.
Algorithm
The algorithm of this example is almost similar to the algorithm of the previous example. You just need to replace the attr() method in the previous algorithm with the prop() method to get the work done.
Example
Below example will explain you how the prop() method change the value of the src attribute of the img element in HTML document −
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<h2>Changing the src attribute of an img element using jQuery</h2>
<p id = "upper">The image shown below will be changed once you click the button.</p>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1GyK6fiCHCRcizXh_dXsFBA5Idw7XayKizQ&usqp=CAU" id = "image"> <br> <br>
<button id = "btn">Click to change the Image</button>
<p id = "result"> </p>
<script>
$("#btn").on('click', function (e) {
$('#image').prop("src", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoLnvRnTNP2rojd7e9b_Ilw5zZkSlPotSPIA&usqp=CAU");
$("#result").html(" The src of above img is changed from <b> Link 1 </b> to " + " <b> Link 2 </b> <br>");
$("#upper").html(" The image shown previously is replaced by some other image as <b> src attribute of img is changed. </b> <br> ");
});
</script>
</body>
</html>
In the above example, we have used the prop() method in jQuery to change the src attribute of the img element in the HTML document.
In this article, we have discussed about the three different methods of changing the value of the src attribute of an img element using the JavaScript as well as jQuery. We have understand all the methods in details by practically implementing them inside the code examples, which helps to build the practical knowledge of the concepts.
12K+ Views
