//INPUT: Detecting mouseovers

<New code>

//INPUT JS: document.getElementById("exampleID").onmouseover = someFunction;
— triggers someFunction when the mouse goes over exampleID
//INPUT JS: document.getElementById("exampleID").onmouseout = someFunction;
— triggers someFunction when the mouse leaves exampleID

//INPUT JS: document.getElementById("exampleID").onmouseover = "";
— removes the mouseover event from exampleID
//INPUT JS: document.getElementById("exampleID").onmouseout = "";
— removes the mouseout event from exampleID

The scamper of tiny mice...

We have been writing code that responds to many different events:

I am sure that you have come across code that changes things whenever you mouse over top of something. This is how you do that in HTML:

document.getElementById('exampleID').onmouseover = someFunction();
triggers someFunction() whenever the mouse enters an element
document.getElementById('exampleID').onmouseout = someFunction();
triggers someFunction() whenever the mouse leaves an element

Learn more

Example code


I'm more than just a rock!


When your mouse goes over the rock image (with id="imageID"), it will trigger the onmouseover event and replace the rock with a heart.

When your mouse leaves the image, it will trigger the onmouseout event and replace the heart back with the rock.

Here is the code:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="Learn how to detect mouseovers with Javascript">
        <!--
            Change log:
                12. Oct 2015    - created!
                25. March 2017  - reworked for better style
        -->
        <style>
            #imageID{
                height: 50px;
            }
        </style>
    </head>

    <body>
        <p>
            I'm more that just a rock!
            <img id="imageID" src="https://www.kasandbox.org/programming-images/cute/Rock.png">
        </p>
        <script>
            //OUTPUT: replace #imageID with a heart image
            var showHeart = function () {
                document.getElementById('imageID').src  
                    = "https://www.kasandbox.org/programming-images/space/healthheart.png";
            }

            //OUTPUT: replace #imageID with a rock image
            var showRock = function () {
                document.getElementById('imageID').src  
                    = "https://www.kasandbox.org/programming-images/cute/Rock.png";
            }
            
            //INPUT: attach showRock and showHeart to #imageID's mouseover and mouseout events
            document.getElementById('imageID').onmouseover  = showHeart;
            document.getElementById('imageID').onmouseout   = showRock;
        </script>
    </body>
</html>

Removing mouseover events

You can remove an onmouseover or onmouseout event by using javascript to replace the function name with an empty string. For example:

document.getElementById("exampleID").onmouseover = "";	//PROCESS: removes the mouseover event from exampleID
document.getElementById("exampleID").onmouseout = "";	//PROCESS: removes the mouseout event from exampleID

Live example: Detecting mouseovers