how to change image onmouseover javascript code example

Example 1: javascript onmouseover change image

let img = document.querySelector('img');
    let start = img.src;
    let hover = img.getAttribute('data-hover'); //specified in img tag

    img.onmouseover = () => { img.src = hover; }
    img.onmouseout = () => { img.src = start; } //to revert back to start

Example 2: javascript swap images on mouseover

function rollover(my_image)
		{
	
			my_image.src = 'images/costAnalysisBtn2.png';
	
		}
function mouseaway(my_image)
		{
	
			my_image.src = "images/costAnalysisBtn1.png";
	
		}
onmouseover="rollover(this)" onmouseout="mouseaway(this)"

Tags:

Css Example