Last Updated on August 27, 2022 by Roshan Parihar
In this tutorial, learn how to change image source using jQuery on button click or hover events. The short answer is to use the attr() function of jQuery to replace the src attribute value of an image
You can also change the image src on hover and back to the previous image on mouse out in jQuery. Let’s find out the different methods with the examples given below.
Method 1: jQuery Change Image Source on Button Click Using click() and attr() Function
To change the image source on the button click, you have to use the click()function of jQuery to get the click event on the image. After that, use the attr() function inside it that takes two arguments. The first argument is src and the second argument is the URL of the new image to replace with the image.
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $('button').click(function(){ $('img').attr('src','/images/user2.jpg'); }); }); </script> <img src="/images/user1.jpg" alt="" width="225" height="225"/> <button type="button">Click to Change Image</button> |
Output
Click the above button to change the image.
The above example contains the button element and the image. When you click the button given above, you will get the image changed to the specified image in the attr() function.
Method 2: Using hover() and attr() Function to Change Image Source on Hover
To change the image on hover, you can use the hover() function of jQuery to get the hover event on the image. Inside this function, you have to use the same attr() that takes two arguments. Specify the attribute src as the first argument and the URL of the image as the second.
|
1 2 3 4 5 6 7 8 |
<script> $(document).ready(function(){ $('img').hover(function(){ $(this).attr('src','/images/user2.jpg'); }); }); </script> <img src="/images/user1.jpg" alt="" width="225" height="225"/> |
Output
Hover over the above image to change.
The above example output contains only the image element. When you mouse over the image, it automatically changes to the specified new image using jQuery.
Method 3: Rotate Img Src on Hover in jQuery
In addition to the above examples, you can also rotate the image from old to new on mouse over and from new to old on mouse out using jQuery. You have to use the hover() and pass two functions in which the second function works for the mouse-out event.
Also, specify the new image in the first function within the attr() function of jQuery. The old image to change on mouse out should come within the second function in attr(). The attr() function takes two arguments in which the first is the src and the second is the URL of the image.
|
1 2 3 4 5 6 7 8 9 10 |
<script> $(document).ready(function(){ $('.myimg').hover(function(){ $(this).attr('src','/images/user2.jpg'); },function(){ $(this).attr('src','/images/user1.jpg'); }); }); </script> <img src="/images/user1.jpg" alt="" class="myimg" width="225" height="225"/> |
Output
Hover over the above image to see the changed image
When you mouse over the above image it replaces the image specified in the first function of hover() function. On mouse out, the old image replaces again the new image. So, it’s a rotating image system to change the image source on hover.
You May Also Like to Read