Sayeed Mohammad Front-end Architect, Developer advocate for Angular, Innovator, Technology Advisor

Mouseover is common behavior for the images, required in any website across the pages. So it’s a good idea to keep this functionality in common script file. Simple jQuery code can make the life easier, just follow the below steps:

Step1: Add the jquery library, if not added or can be used google CDN hosted:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Step2: Add the below code within the script tag

<script language="javascript">
$(function() {
	$("img.rollover").hover(
		function () { 
		this.src = this.src.replace("_off","_on");
		},
	        function () { 
		this.src = this.src.replace("_on","_off");
		}
	);
});
</script>

Step3: Add the css class ‘rollover’, in which image you want mouseover

<img src="imagename_off.gif" class="rollover"/>

Step4: Add the images ‘normal’ & ‘mouseover’ in same location, ending with ‘imagename_off.gif’ & ‘imagename_on.gif’.