How to change image source on hover using jQuery

There's load of ways of doing this. One of the simplest is to have the two states in the same image and then just changing the background position on hover. This way there's no extra wait for the hover image to load as its already there.

Well, here are steps you have to follow to achieve this functionality, you will find that it is quiet easy trick once you recognize the code.

How to change image source on hover using jQuery.

1. Create a function e.g.; playbuttonfunc(). It has 3 parameters. first is element identifier, second is source image path, third is hover image path. Now this function is implementing hover method of that element. As soon as someone hover over image, first function which is parameter inside hover method, will be called, and it will replace source image path to hover image path, which we passed inside function playbuttonfunc(). Later if mouse take out of image, second parameter of hover method fires. and it again replace hover image with real image source. 

function playbuttonFunc(element,imgsrc,imghover) { 
jQuery(element).hover( function(){
jQuery(this).attr("src", function(index, attr){ return attr.replace(imgsrc,imghover); }); },
function(){ jQuery(this).attr("src", function(index, attr){ return attr.replace(imghover,imgsrc); });

2. Call function on document.ready state of jQuery. As we want to run our function once all object/elements on our page are loaded first.

  playbuttonFunc("img.img-fluid.imgjoomlaplaylist","/images/Guide_to_Joomla.png", "/images/play_this_video.png");

That's all. I hope you enjoyed this tutorial. And it can be useful for your website as well.