Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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
Step1 − Access the image element by id.
let deomImage = document.getElementById("demo");Step 2 − Assign onmouseover event to image element deomImage.
deomImage.onmouseover = function() {
document.demo.style = "height:200px;width:200px";
});Step 3 − Assign onmouseout event to image element deomImage.
deomImage.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="https://www.tutorialspoint.com/python_pillow/images/tutorials_point.jpg" style="height:100px;width:100px;" id="demo" name="demo" alt="demo Image">
<script>
let deomImage = document.getElementById("demo");
deomImage.onmouseover = function() {deomImage.style = "height:200px; width:200px";};
deomImage.onmouseout = function() {deomImage.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 demonstrate 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="https://www.tutorialspoint.com/python_pillow/images/tutorials_point.jpg" style="height:100px;width:100px;"
id="demo" name="demo" alt="demo Image">
<script>
let deomImage = document.getElementById("demo");
deomImage.addEventListener( "mouseover", function () {
document.demo.style = "height:200px; width:200px";
});
deomImage.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="https://www.tutorialspoint.com/python_pillow/images/tutorials_point.jpg" style="height:100px;width:100px;"
id="demo" name="demo" alt="demo Image">
<script>
let deomImage = document.getElementById("demo");
deomImage.addEventListener( "mouseover", function () {
document.demo.src = "https://www.tutorialspoint.com/static/images/logo-footer-b.png";
});
deomImage.addEventListener( "mouseout", function () {
document.demo.src = "https://www.tutorialspoint.com/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="https://www.tutorialspoint.com/python_pillow/images/tutorials_point.jpg"
OnMouseOver="mouseRollover('demo1','https://www.tutorialspoint.com/static/images/logo-footer-b.png')"
OnMouseOut="mouseRollover('demo1','https://www.tutorialspoint.com/python_pillow/images/tutorials_point.jpg')"
style="height:100px;width:100px;" id="demo1" alt="demo Image">
<img src="https://www.tutorialspoint.com/python_pillow/images/tutorials_point.jpg"
OnMouseOver = "mouseRollover('demo2','https://www.tutorialspoint.com/static/images/logo-footer-b.png')"
OnMouseOut = "mouseRollover('demo2','https://www.tutorialspoint.com/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>Conclusion
In this tutorial, we have seen the different ways to image rollover with the mouse event. The first approach is the basic approach in which we have only changed the image's styles. The second approach is used only when we need to apply mouse rollover on a single image. When a user needs to apply mouse rollover on multiple images, it is recommended to use the third approach.
7K+ Views
To Continue Learning Please Login