HTML - attributes - onmouse

revision:

Content

onmouse-related attributes syntax some examples mouse down and mouse up events

onmouse-related attributes

Supported HTML tags: all HTML elements, EXCEPT: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>.

The order of events related to the onmousedown event (for the left/middle mouse button): onmousedown, onmouseup, onclick.

The order of events related to the onmousedown event (for the right mouse button): onmousedown, onmouseup, oncontextmenu.

syntax

"onmousedown" attribute fires when a user presses a mouse button over an element.

syntax: <element onmousedown="script"></element>

The script event runs when the onmousedown attribute is called.

"onmouseenter" event occurs when the mouse pointer is moved onto an element.

This event is often used together with the onmouseleave event, which occurs when the mouse pointer is moved out of an element. The onmouseenter event is similar to the onmouseover event. The only difference is that the onmouseenter event does not bubble (does not propagate up the document hierarchy).

syntax: <element onmouseenter="script"></element>

The script event runs when the onmouseenter attribute is called.

"onmousemove" attribute fires when the pointer is moving while it is over an element.

syntax: <element onmousemove="script"></element>

script: the script to be run on onmousemove.

"onmouseout" attribute works when the mouse pointer moves out of the specified element.

This event is often used together with the "onmouseover event", which occurs when the pointer is moved onto an element, or onto one of its children.

syntax: <element onmouseout = "script"></element>

This attribute contains single value script, which works when the mouse moves out of the element.

"onmouseover" attribute fires when the mouse pointer moves over an element.

The onmouseover attribute is often used together with the onmouseout attribute.

syntax: <element onmouseover="script"></element>

script: the script to be run on onmouseover

"onmouseup" attribute> fires when a mouse button is released over the element.

syntax: <element onmouseup="script"></element>

script: the script to be run on onmouseup.

"onmousewheel" attribute fires when the mouse wheel is rolled up or down over an element.

Deprecated: the onmousewheel attribute is deprecated, you should use the onwheel attribute instead.

The onmousewheel attribute is part of the event attributes and can be used on any HTML element.

syntax: <element onmousewheel="script"></element>

some examples

top

Click the text! The mouseDown() function is triggered when the mouse button is pressed down over this paragraph, and sets the color of the text to blue. The mouseUp() function is triggered when the mouse button is released, and sets the color of the text to orange.

codes: 
                    <p class="spec" id="myP" onmousedown="mouseDown()" onmouseup="mouseUp()"> Click the text! 
                    The mouseDown() function is triggered when the mouse button is pressed down over this paragraph, 
                    and sets the color of the text to blue. The mouseUp() function is triggered when the mouse button
                    is released, and sets the color of the text to orange.</p>
                    <script>
                        function mouseDown() {
                        document.getElementById("myP").style.color = "blue";
                        }
                        function mouseUp() {
                        document.getElementById("myP").style.color = "orange";
                        }
                    </script>

click the red circle

codes 
                    <div class="circle" onmousedown="mouseDownFn()" onmouseup="mouseUpFn()">
                    </div>
                    <p class="spec">click the red circle</p>
                    <script>
                        function mouseDownFn() {
                        document.querySelector('.circle').style.transform = 'scale(0.5)';
                        }
                        function mouseUpFn() {
                        document.querySelector('.circle').style.transform = 'scale(1.2)';
                        }
                    </script>
                    <style>
                        .circle {background: #db133a; height: 15vw; width: 15vw; border-radius: 50%; margin: 1vw auto;margin-left: -3vw; }
                    </style>

Mouse over me

codes: 
                    <h4 style="margin-left:3vw;" id="demo" onmouseenter="mouseEnter()" onmouseleave="mouseLeave()"
                    Mouse over me</ h4>
                    <script>
                        function mouseEnter() {
                        document.getElementById("demo").style.color = "red";
                        document.getElementById("demo").style.transform = "scale(1.2)";
                        }
                        
                        function mouseLeave() {
                        document.getElementById("demo").style.color = "blue";
                        document.getElementById("demo").style.transform = "scale(0.5)";
                        }
                    </script>

Eternal Health

codes: 
                    <div>
                        <h4 id="demo_B">Eternal Health    
                    </div>
                    <script>
                        document.getElementById("demo_B").addEventListener("mouseenter", enter);                                     
                        function enter() {
                            document.getElementById("demo_B").style.color = "green";
                            document.getElementById("demo_B").style.transform = "rotate(-10deg)";
                        }
                    </script>
Smiley

The function bigImg() is triggered when the mouse pointer is moved over the image. This function enlarges the image.

The function normalImg() is triggered when the mouse pointer is moved out of the image. That function sets the height and width of the image back to normal.

codes: 
                    <img style="margin-left:3vw;" onmousemove="bigImg(this)" onmouseout="normalImg(this)"
                    border="0" src="../../pics/smiley.png" alt="Smiley" width="32" height="32">
                    <script>
                        function bigImg(x) {
                        x.style.height = "64px";
                        x.style.width = "64px";
                        }
                        
                        function normalImg(x) {
                        x.style.height = "32px";
                        x.style.width = "32px";
                        }
                    </script>

The onmousemove event occurs every time the mouse pointer is moved over the div element.

onmousemove:
Mouse over me!

codes 
                    <div id="one1" style="margin-left:3vw;" onmousemove="mouseMove()">
                        <p class="spec two">onmousemove: <br> <span id="demo_A">Mouse over me!</span></p>
                    </div>
                    <script>
                        var z = 0;
                        
                        function mouseMove() {
                        document.getElementById("demo_A").innerHTML = z+=1;
                        }
                    </script>
                    <style>
                        #one1 { width: 20vw; height: 10vw; border: 1px solid black; margin: 1vw; 
                            float: left; padding: 3vw; text-align: center;
                        background-color: lightgreen;}
                        .two{background-color: grey;}
                    </style>

Anything you want to wish

codes: 
                    <p class="spec" onmouseout = "mouseLeave()"> Anything you want to wish</p>                  
                    <p class="spec" id="pep" style="color: red; font-size: 2vw;"></p>
                    <script> 
                        function mouseLeave() { 
                            document.getElementById("pep").innerHTML = "mouse moved out"; 
                        } 
                    </script>
Smiley

The function bigImg() is triggered when the mouse pointer is moved over the image. This function enlarges the image.

The function normalImg() is triggered when the mouse pointer is moved out of the image. That function sets the height and width of the image back to normal.

codes: 
                    <img style="margin-left:3vw;" onmousemove="bigImg(this)" onmouseout="normalImg(this)" 
                    border="0" src="../../pics/smiley.png" alt="Smiley" width="32" height="32">
                    <p class="spec">The function bigImg() is triggered....</p>
                    <p class="spec">The function normalImg() is triggered .... </p>
                    <script>
                        function bigImg(x) {
                            x.style.height = "64px";
                            x.style.width = "64px";
                        }
                        
                        function normalImg(x) {
                            x.style.height = "32px";
                            x.style.width = "32px";
                        }
                    </script>
Smiley

The function bigImg() is triggered when the user moves the mouse over the image. This function enlarges the image.

The function normalImg() is triggered when the mouse pointer is moved out of the image. That function sets the height and width of the image back to normal.

codes:

                    <img style="margin-left:3vw;" onmouseover="bigImg(this)" onmouseout="normalImg(this)"
                    border="0" src="../../pics/smiley.png" alt="Smiley" width="32" height="32">
                    <p class="spec">The function bigImg() is triggered when the ... .</p>
                    <p class="spec">The function normalImg() is triggered when the .... .</p>
                    <script>
                        function bigImg(x) {
                        x.style.height = "64px";
                        x.style.width = "64px";
                        }
                        
                        function normalImg(x) {
                        x.style.height = "32px";
                        x.style.width = "32px";
                        }
                    </script>

example

You are visting me??

codes:

                    <p class="spec" onmouseover ="mouseOver()">You are visting me??</p>                           
                    <p class="spec" id="pen" style="color: red;"></p>
                    <script>
                        function mouseOver() {
                            document.getElementById("pen").style.transform = "scale(1.1)";      
                            document.getElementById("pen").innerHTML = "mouse all over me!!";
                        } 
                    </script>

Click the text! The mouseDown() function is triggered when the mouse button is pressed down over this paragraph, and sets the color of the text to red. The mouseUp() function is triggered when the mouse button is released, and sets the color of the text to green.

codes: 
                    <p class="spec" id="myP" onmousedown="mouseDown()" onmouseup="mouseUp()"> Click the text!
                    The mouseDown() function is triggered when the mouse button is pressed down over this paragraph, 
                    and sets the color of the text to red. The mouseUp() function is triggered when the mouse button
                    is released, and sets the color of the text to green.</p>
                <script>
                    function mouseDown() {
                        document.getElementById("myP").style.color = "blue";
                    }
                    
                    function mouseUp() {
                        document.getElementById("myP").style.color = "orange";
                    }
                </script>

click the red circle

codes: 
                    <div>
                        <div style="margin-left:3vw;" class="circle_1" onmousedown="mouseDownFunct()" onmouseup="mouseUpFunct()"></div>
                        <p class="spec">click the red circle</p>
                    </div>
                    <script>
                        function mouseDownFunct() {
                        document.querySelector('.circle_1').style.transform = 'scale(0.5)';
                        }
                        function mouseUpFunct() {
                        document.querySelector('.circle_1').style.transform = 'scale(1.2)';
                        }
                    </script>
                    <style>
                        .circle_1 {background: #db133a; height: 15vw; width: 15vw; border-radius: 50%; margin: 1vw auto; }
                    </style>
This example demonstrates how to assign an "onmousewheel" event to a DIV element. Roll the mouse wheel over me - either up or down!

A function is triggered when you roll the mouse wheel over div. The function sets the font-size of div to 35 pixels.

codes:

                    <div style="margin-left:3vw;" id="myDIV" onmousewheel="myWheel()">This example 
                    demonstrates how to assign an "onmousewheel" event to a DIV element. Roll the
                    mouse wheel over me -  either up or down!</div>
                    <p class="spec">A function is triggered when you roll the mouse wheel over div. 
                    The function sets the font-size of div to 35 pixels.</p>
                    <script>
                        function myWheel() {
                        document.getElementById("myDIV").style.fontSize = "35px";
                        }
                    </script>

mouse down and mouse up events

top

mouse down and mouse up

Please perform mouse down and up event any where in this DIV. 

code:
            <div>
                <div id="mouseUpDownDiv" style="width: 600px; height: 100px; background-color: skyblue;">
                    Please perform mouse down and up event any where in this DIV.
                </div>
                <p id = "output2"></p>
            </div>
            <script>
                const mouseUpDownDiv = document.getElementById('mouseUpDownDiv');
                const outputDiv2 = document.getElementById("output2");
                mouseUpDownDiv.addEventListener('mousedown', function(event) {
                    outputDiv2.innerHTML += 'Mouse button down!' + JSON.stringify(event) + "<br>";
                    });
                mouseUpDownDiv.addEventListener('mouseup', function(event) {
                    outputDiv2.innerHTML += 'Mouse button up!' + JSON.stringify(event) + "<br>";
                });
            </script>

mouse move event

Please move you mouse inside this DIV.

code:
            <div>
                <div id="mouseMoveDiv" style="width: 600px; height: 200px; background-color: skyblue;">
                    Please move you mouse inside this DIV.</div>
                <p id = "output3"></p>
            </div>
            <script>
                const mouseMoveDiv = document.getElementById('mouseMoveDiv');
                const outputDiv3 = document.getElementById("output3");
                mouseMoveDiv.addEventListener('mousemove', function(event) {
                    const x = event.clientX;
                    const y = event.clientY;
                    outputDiv3.innerHTML += `Mouse moved to (${x}, ${y})` + JSON.stringify(event) + "<br>";
                });
            </script>

mouse wheel event

Please bring the cursor inside this DIV and rotate the wheel of mouse.

code:
            <div>
                <div id="wheelDiv" style="width: 600px; height: 200px; background-color: skyblue">
                    Please bring the cursor inside this DIV and rotate the wheel of mouse.</div>
                <p id = "output4"></p>
            </div>
            <script>
                const wheelDiv = document.getElementById('wheelDiv');
                const outputDiv4 = document.getElementById("output4");
                wheelDiv.addEventListener('wheel', function(event) {
                    outputDiv4.innerHTML += 'Mouse wheel rotated!'+ event + "<br>";
            });
            </script>

drawing with mouse events

code:
            <div>
                <canvas id="myPics" width="560" height="360"></canvas>
            </div>
            <style>
                canvas {border: 0.1vw solid black; width: 560px; height: 360px;}
    
            </style>
            <script>
                // When true, moving the mouse draws on the canvas
                let isDrawing = false;
                let x = 0;
                let y = 0;
                const myPics = document.getElementById("myPics");
                const context = myPics.getContext("2d");
    
                // event.offsetX, event.offsetY gives the (x,y) offset from the edge of the canvas.
                // Add the event listeners for mousedown, mousemove, and mouseup
                myPics.addEventListener("mousedown", (e) => {
                    x = e.offsetX;
                    y = e.offsetY;
                    isDrawing = true;
                });
                myPics.addEventListener("mousemove", (e) => {
                    if (isDrawing) {
                        drawLine(context, x, y, e.offsetX, e.offsetY);
                        x = e.offsetX;
                        y = e.offsetY;
                    }
                });
    
                window.addEventListener("mouseup", (e) => {
                    if (isDrawing) {
                        drawLine(context, x, y, e.offsetX, e.offsetY);
                        x = 0;
                        y = 0;
                        isDrawing = false;
                    }
                });
    
                function drawLine(context, x1, y1, x2, y2) {
                    context.beginPath();
                    context.strokeStyle = "black";
                    context.lineWidth = 1;
                    context.moveTo(x1, y1);
                    context.lineTo(x2, y2);
                    context.stroke();
                    context.closePath();
                }
           </script>

mouse position

Move your mouse to see its location.

code:
            <div>
                <p>Move your mouse to see its location.</p>
                <div id="track"></div>
                <p id="log"></p>
            </div>
            <style>
                #track {background-color: goldenrod; height: 200px; width: 400px;}
    
            </style>
            <script>
                let track = document.querySelector('#track');
                track.addEventListener('mousemove', (e) => {
                    let log = document.querySelector('#log');
                    log.innerText = `
                        Screen X/Y: (${e.screenX}, ${e.screenY})
                        Client X/Y: (${e.clientX}, ${e.clientY})`
                });
            </script>