Change Image Source using JQuery

Change Image Source using JQuery

Landing here means that you probably want to change image source using jquery.
Tell me more about your problem, you want a user to click on a button and the image should get change upon the event happening or you want an image to get change on scrolling down to a certain amount of web page.

You can read a separate guide about the scrolling event handling in this guide.

Coming back to the problem and solution of it. We have found 2 major solutions to change the image source using jquery.

Possible Solution 1 – Change Image Source using JQuery

You can easily use the jquery default function attr(). 

Consider that your img tag has an id named as “imageID1” 

Now using jquery you can easily change the image source.

The $ (dollar sign) is the jquery object which initiate all of jquery functions.

 #imageID1 is the id of our img element which we want to change. attr() is jquery function which accept two main paramenters. first parameter should be the type of attribute and the second parameter should be the value of that attribute.

Using src as first parameter and second_image.jpg as second parameter.

Change the image onclick function – jQuery

You can also use the below code for onclick function 

but don’t limited to them, here is one more option.

Final Words

This is it to change image source using jquery. You can give try to these codes if you still face any problem just don’t hesitate to start a conversation in comment section. I will try my best to answer your questions one by one.