HTML5 > Elements of HTML

Mouse Events in HTML5

How to use the Mouse Events in HTML


Events

Events are used to perform the click functions or trigger actions in HTML

Mouse Events

Mouse events perform different types of events

onclick events

 <h2> click on the button to open the value</h2>
    <button onclick="myfunction()">Click ME</button>
    <p id="demo"></p>
    <p>manideep sudheer</p>
<script>
    function myfunction() {
        document.getElementById("demo").innerHTML = "helloTechFunda";
    }
</script>
  • In the above code snippet we have defined the onclick function
  • The onclick as myfunction with id as demo which calls the predefined function as id demo with the value hello techfunda
  • When we click the button it displays the clickable function as hello techfunda with the given value

output

Ondouble click events

It is used to double click the events 

 <h2> Double click on the button to open the value</h2>
    <button ondblclick="myfunction()">Click ME</button>
    <p id="demo"></p>
    <p>manideep sudheer</p>
<script>
    function myfunction() {
        document.getElementById("demo").innerHTML = "Learn tutorials in techfunda";
    }
</script>

ondblclick

  • In the above code snippet we have defined the double click of the functions
  • The button element with ondblclick function as myfunction and p tag with the demo,
  • Function as myfunction with the predefined the function as demo and value as learn tutorials in techfunda

output

Mouse down and Mouse up 

It is used to mouse down and mouse up functions which are used to change the functions when the mouse is placed on the function up or down

  <h2> click the text to change the color of the text </h2>
    <p id="demo" onmousedown="mouseDown()" onmouseup="mouseUp()">
     TechFunda is a online tutorials
    </p>

    <script>
        function mouseDown() {
            document.getElementById("demo").style.color = "blue";
        }

        function mouseUp() {
            document.getElementById("demo").style.color = "lime";
        }
    </script>

Mouse down and Mouse up

  • In the above code snippet we have two functions mouse up and mouse down.
  • It change the color of the text when the the mouse is placed up or down
  • It turns the color of the text to the blue and lime  

output

Mouse move and mouse out

It is used to move the mouse to zoom the image when the mouse is moved on it and the image is is normal when the mouse is out

<h2><i>PLace the corsor on the image to change the image</i></h2>
    <img onmousemove="bigImg(this)" onmouseout="normalImg(this)" src="images/KidsFundaLoga.png">

    <p>Techfunda is the best online tutorials </p>
    <p></p>

    <script>
        function bigImg(x) {
            x.style.height = "164px";
            x.style.width = "640px";
        }

        function normalImg(x) {
            x.style.height = "50px";
            x.style.width = "40px";
        }
    </script>

Mouse move and mouse out

  • In the above code snippet we have defined the mouse move and mouse out
  • It is used to change the image when the mouse is placed on it and gets its normal image when the mouse is out from the image
  • The two functions as big image and normal image, we have given the big image to the mouse mov and normal image to the mouse out functions

Output

Onscroll

It is used to make the page scroll bu using HTML

 <p style="color:green;font-size:30px">Scroll the mouse to change the color</p>

    <div id="myDIV" onscroll="myFunction()">
       Techfunda is a online tutorials for the beginers and dotnetfunda is an online tutorials to learn and share the knowledge with eachother
    </div>

    <script>
        function myFunction() {
            document.getElementById("myDIV").style.color = "blue";
        }
    </script>

Onscroll

  • In the above code snippet we have the function onscroll which is used to scroll the page
  • The div id= myDIV and function as myfunction in which we are declaring the onscroll mouse function as color blue
  • The onscroll function as myfunction calls the script function to change the color of the text when the mouse is pointed on the text in scroll box

output 

 Views: 579 | Post Order: 27



Write for us