Using JavaScript and jQuery, there are different ways to change the image path given in the src attribute of the element in an HTML document.
How to use JavaScript to change the src attribute of the img element−
Use the src attribute in JavaScript.
How to use jQuery to change the src attribute of the img element−
Use attr() method
Use prop() method
Let us discuss the above listed methods of changing the src of the img element in detail one by one.
JavaScript allows us to use the src attribute to get the value that has been assigned to it, and also to update or change the value of the same attribute. This is a very common way to change the value of the src attribute of an img element.
The following syntax will explain to you how to use the src attribute in JavaScript to change the value of the src attribute of the img element -
Selected_image_element.src = " new value ";
Let us understand the practical implementation of this approach through a code example.
Step 1 − In the first step, we will add an 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 an onclick event and call a function to change the src of the image when the user clicks the button.
Step 3 - In the next step, we will define a JavaScript function in which we will get the img element using its ID and then change the src attribute using Switch 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.
The following example will explain to you how to actually use the src attribute in JavaScript to change the src attribute of an img.
<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://img.php.cn/" 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://img.php.cn/") {
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://img.php.cn/";
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 use the src attribute in JavaScript to change the src attribute of the img element in the HTML document. Here, we switch between two images every time the button is clicked.
We can also use the attr() method in JavaScript to change the src attribute.
attr() method - The attr() method accepts two parameters. The first parameter is the name of the attribute to be changed, expressed in string form, and the other parameter is the new value to be assigned to the attribute. value.
The following syntax will explain to you how the attr() method with parameters is implemented−
attr(" attribute_name ", " new_value ");
Let us understand the implementation of this method in detail through a code example.
Step One - In the
of the
xenserver
How to replace all ppt backgrounds
How to recover deleted files on computer
Why can't my mobile phone make calls but not surf the Internet?
How to open two WeChat accounts on Huawei mobile phone
Oracle view table operation history
What are the differences between weblogic and tomcat
What's going on when phpmyadmin can't access it?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
