onmousedown and onmouseup events

Bring Mouse inside this ,
Press and hold your mouse key first , then release it


Here is the sample code.
<div id="dis1" style=" position: relative; right: 0px; top: 10px; 
 background-color: #f1f1f1; width: 250px;
 padding: 10px; color: black; border: #0000cc 2px dashed; "
 onmousedown="this.style.background='#f0f000';" 
 onmouseup="this.style.background='#90f0c0';">
Bring Mouse inside this <br>Press and hold your mouse key first , 
then release it</div>
We will check how to use onmousedown and onmouseup events to trigger various events.

To demonstrate this we have used one div layer and when Mouse is placed over it and key is pressed the event will be triggered.
We need to press the key and hold it for some time to know the difference. As long as we have pressed and holding the mouse key the background color will change as per the onmousedown event. Once we release the mouse button then the event onmouseup will take over and the event associated with it to change the background color occurred.

In above code the background color will be #f1f1f1 when page loads, then once we click and hold the left button of the mouse over this box the color will change to #f0f000. Finally the color became #90f0c0 once we release the button.
Event Handling onMouseOver and onMouseOut

Subscribe to our YouTube Channel here


Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com







    Post your comments , suggestion , error , requirements etc here




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer