Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How can I show image rollover with a mouse event in JavaScript?
This tutorial will teach us to show image rollover with a mouse event in JavaScript. The meaning of the image rollover is to either change the image style or the whole image when the user rollovers the mouse on the image.
To build an attractive user interface, developers often add image rollover features to the website and applications. Here, we will see to apply image rollover differently.
Change the Style of the Image on Mouse Rollover
In this method, to create the image rollover, we will use the onmouseover and onmouseout event of JavaScript. When users take the mouse pointer on the image, it will change the style of the image, and when the user takes out the mouse pointer from the image, the default style will be applied to the image.
Syntax
Users can follow the below syntax to change styles of image on rollover.
Using JavaScript onmouseover and onmouseout events
object.onmouseover = function(){myScript};
object.onmouseout = function(){myScript};
Using the addEventListener() method
object.addEventListener("mouseover", myScript);
object.addEventListener("mouseout", myScript);
Algorithm
Step 1 ? Access the image element by id.
let demoImage = document.getElementById("demo");
Step 2 ? Assign onmouseover event to image element demoImage.
demoImage.onmouseover = function() {
document.demo.style = "height:200px;width:200px";
};
Step 3 ? Assign onmouseout event to image element demoImage.
demoImage.onmouseout = function() {
document.demo.style = "height:100px;width:100px;";
};
Events
onmouseover ? It is an event that will be called whenever a user will rollover on the image element.
onmouseout ? This event will be triggered when the user will mouse pointer outside the image.
Example
Using JavaScript onmouseover and onmouseout events
In the below example, we have created the image element and given the default width and height to the image. We have added the "onmouseover" event to the image element to apply a different style when the user rollover to the image. Furthermore, when the user moves the cursor pointer outside the image element, we have applied the "onmouseout" event to apply the default style.
<!DOCTYPE html>
<html>
<body>
<h2> Image rollover with mouse event. </h2>
<h4> Rollover on the below image to change the styles of the image. </h4>
<img src="/python_pillow/images/tutorials_point.jpg" style="height:100px;width:100px;" id="demo" name="demo" alt="demo Image">
<script>
let demoImage = document.getElementById("demo");
demoImage.onmouseover = function() {
demoImage.style = "height:200px; width:200px";
};
demoImage.onmouseout = function() {
demoImage.style = "height:100px; width:100px";
};
</script>
</body>
</html>
When you hover over the image, the dimensions of the image increase, and when the user moves the mouse pointer outside the image, the dimensions of the image decrease.
Example
Using the addEventListener() method
The below example demonstrates how to show image rollover using the addEventListener() method. This example shows the same effect as demonstrated in the above example.
<html>
<head>
<title> Show image rollover with mouse event. </title>
</head>
<body>
<h2> Showing image rollover with mouse event. </h2>
<h4> Rollover on the below image to change the styles of the image. </h4>
<img src="/python_pillow/images/tutorials_point.jpg" style="height:100px;width:100px;" id="demo" name="demo" alt="demo Image">
<script>
let demoImage = document.getElementById("demo");
demoImage.addEventListener("mouseover", function () {
document.demo.style = "height:200px; width:200px";
});
demoImage.addEventListener("mouseout", function () {
document.demo.style = "height:100px; width:100px;";
});
</script>
</body>
</html>
In the above output, users can see that when they hover over the image, the dimensions of the image increase, and when the user moves the mouse pointer outside the image, the dimensions of the image decrease.
Change the Image on Mouse Rollover
In the above approach, we have just changed the image styles when the user rollover on the image. In this section, we will learn to change the image when users move the mouse pointer on the image, and it will set the default image when the user moves the mouse pointer outside the image.
Algorithm
Step 1 ? Access the image by id.
Step 2 ? Use addEventListener() method to attach a "mouseover" event to the image element.
Step 3 ? Use addEventListener() method to attach a "mouseout" event to the image element.
Example
In the below example, we will change the value of the "src" attribute of the image to replace the image on the mouse rollover. We have used the above mouseover and mouseout events to achieve our goal.
<html>
<head>
<title> Show image rollover with mouse event . </title>
</head>
<body>
<h2> Show image rollover with mouse event. </h2>
<h4> Rollover on the below image to change the image. </h4>
<img src="/python_pillow/images/tutorials_point.jpg" style="height:100px;width:100px;" id="demo" name="demo" alt="demo Image">
<script>
let demoImage = document.getElementById("demo");
demoImage.addEventListener("mouseover", function () {
document.demo.src = "/static/images/logo-footer-b.png";
});
demoImage.addEventListener("mouseout", function () {
document.demo.src = "/python_pillow/images/tutorials_point.jpg";
});
</script>
</body>
</html>
In the above output, when user will rollover on the image, the image will be changed.
Apply Rollover Event on Multiple Images
In this section, we will create a custom function that has two parameters. One is image id, and another is image src which we want to replace with the current image source when an event triggers. When the mouseover and mouseout events trigger, we will call a function by passing the image id and new image source URL as arguments.
Example
In this way, users can apply the image rollover on multiple images by writing fewer lines of code.
<html>
<head>
<title> Show image rollover with mouse events. </title>
</head>
<body>
<h2> Show image rollover with mouse event. </h2>
<h4> Rollover on any image change the default image. </h4>
<img src="/python_pillow/images/tutorials_point.jpg"
onmouseover="mouseRollover('demo1','/static/images/logo-footer-b.png')"
onmouseout="mouseRollover('demo1','/python_pillow/images/tutorials_point.jpg')"
style="height:100px;width:100px;" id="demo1" alt="demo Image">
<img src="/python_pillow/images/tutorials_point.jpg"
onmouseover="mouseRollover('demo2','/static/images/logo-footer-b.png')"
onmouseout="mouseRollover('demo2','/python_pillow/images/tutorials_point.jpg')"
style="height:100px; width:100px;" id="demo2" alt="demo Image">
<script>
function mouseRollover(imageId, imageSrc) {
let image = document.getElementById(imageId);
image.src = imageSrc;
}
</script>
</body>
</html>
Comparison of Methods
| Method | Best For | Complexity |
|---|---|---|
| Style changes only | Size/color effects | Simple |
| Image source swap | Complete image change | Medium |
| Reusable function | Multiple images | Efficient |
Conclusion
Image rollover effects can be achieved through style changes or complete image swapping. Use the reusable function approach when working with multiple images for cleaner, more maintainable code.
10K+ Views
