How to change image source on hover using jQuery
Share
Category: jQuery, HTML, CSS, JavaScript

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.

jQuery(document).ready(function(){
  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.