JavaScript Change Image on Hover

In this tutorial we will learn How to Change Image on Hover with JavaScript. For this we can use onmouseover and onmouseout events which will execute the JavaScript function to change the image. One JavaScript function is used for both mouseover and mouseout events.

Table of Contents

onmouseover event

onmouseover event occurs when mouse hovers over the HTML element, it is also used to trigger the JavaScript function on mouse hover event.

onmouseout event

onmouseout event occurs when mouse moves out of the HTML Tag, it also executes the JavaScript function when mouse moves away.

src property

src property sets or returns the value of the src attribute of the img tag.

HTML Code

HTML Code is given below, we have a img tag with onmouseover and onmouseout events.


<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Hover Image Change</title>
<style>
.responsive
{
width: 100%;    
}
</style>    
</head>             
<body>
    
<img src="car.jpg" class="responsive" onmouseover="changeImage(1,this)" onmouseout="changeImage(2,this)">    
    
<script src="script.js"></script>    
</body>
</html>

JavaScript Code

Take a look at the JavaScript code, in this code changeImage() function will be executed on both mouse hover and mouse out events. This function will change the image using src property.

Which image is to use depends on the value passed to the function as a parameter.


<script>
function changeImage(x,image)
{
if(x==1)
{
image.src = 'bike.jpg';    
}
if(x == 2)
{
image.src = 'car.jpg';
}
}
</script>

Demo

Check Demo

Video Tutorial

Watch video tutorial on How to Change Image on Hover in JavaScript.