Teach with us

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.

Updated on 14-Jul-2022 12:35:00

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements