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.
"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.
some examples
example
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>
"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.
<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>
"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.
some examples
example
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.
"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.
some examples
example
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>
example
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>
"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
some examples
example
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>
"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.
some examples
example
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>
"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
example
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>
