![]() |
The HTML
onmouseout event attribute triggers when the mouse pointer moves out of the boundaries of the HTML element to which it is applied. This attribute is typically used to execute a JavaScript function or script when this event occurs, enabling dynamic changes or interactions based on mouse movement.
|
Example:
HTML
<img onmouseout="normalImg(this)" src="smiley.gif" alt="Smiley">
The onmouseout attribute fires when the mouse pointer moves out of an element.
Tip: The onmouseout attribute is often used together with the onmouseover attribute.
<element onmouseout="script">
Value | Description |
---|---|
script | The script to be run on onmouseout |
Supported HTML tags: | All HTML elements, EXCEPT: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title> |
---|
The function bigImg() is triggered when the user 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.
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="https://horje.com/avatar.png" alt="Smiley" width="32" height="32">
<p>The function bigImg() is triggered when the user mouse over the image. This function enlarges the image.</p>
<p>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.</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>
</body>
</html>
html event attributes |
List of Mouse Events Attribute | Mouse Events Attribute |
What is HTML onclick Event Attribute | Mouse Events Attribute |
What is HTML ondblclick Event Attribute | Mouse Events Attribute |
What is HTML onmousedown Event Attribute | Mouse Events Attribute |
What is HTML onmousemove Event Attribute | Mouse Events Attribute |
What is HTML onmouseout Event Attribute | Mouse Events Attribute |
What is HTML onmouseover Event Attribute | Mouse Events Attribute |
What is HTML onmouseup Event Attribute | Mouse Events Attribute |
What is HTML onwheel Event Attribute | Mouse Events Attribute |
Example of HTML onmouseout Event Attribute | Mouse Events Attribute |
Definition and Usage of HTML onmouseout Event Attribute | Mouse Events Attribute |
Browser Support of HTML onmouseout Event Attribute | Mouse Events Attribute |
Syntax of HTML onmouseout Event Attribute | Mouse Events Attribute |
Attribute Values of HTML onmouseout Event Attribute | Mouse Events Attribute |
Technical Details of HTML onmouseout Event Attribute | Mouse Events Attribute |
How to Execute a JavaScript when moving the mouse pointer out of an image | Mouse Events Attribute |
Read Full: | Mouse Events Attribute |
Type: | Develop |
Category: | Web Tutorial |
Sub Category: | Mouse Events Attribute |
Uploaded by: | Admin |
Views: | 13 |
Reffered: https://www.w3schools.com/tags/ev_onmouseout.asp