How to change images on mouse hover using javascript | mouse hover events
How to change images on mouse hover using javascript | mouse hover events <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Test Page</title> </head> <body> <img id="photo" onmouseover="box3()" onmouseout="box4()" src="1.png" width="200px" height="100px" > //remember to change source of photo <script> function box3() { document.getElementById("photo").src="2.jpg"; //remember to change source of photo } function box4() { document.getElementById("photo").src="1.png"; //remember to change source of photo } </script> Here is how the output looks like :