Horje
What is HTML onmouseout Event Attribute
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 of HTML onmouseout Event Attribute

It will Execute a JavaScript when moving the mouse pointer out of an image.
index.html
Example: HTML
 <img onmouseout="normalImg(this)" src="smiley.gif" alt="Smiley"> 

Output should be:

Example of HTML onmouseout Event Attribute

Definition and Usage of HTML onmouseout Event Attribute

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.

Browser Support of HTML onmouseout Event Attribute

Browser Support of HTML onmouseout Event Attribute

Syntax of HTML onmouseout Event Attribute

<element onmouseout="script">

Attribute Values of HTML onmouseout Event Attribute

Value Description
script The script to be run on onmouseout

Technical Details of HTML onmouseout Event Attribute

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

How to Execute a JavaScript when moving the mouse pointer out of an image

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.

index.html
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>

Output should be:

How to Execute a JavaScript when moving the mouse pointer out of an image




html event attributes

Related Articles
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

Single Articles
Example of HTML onmouseout Event AttributeMouse Events Attribute
Definition and Usage of HTML onmouseout Event AttributeMouse Events Attribute
Browser Support of HTML onmouseout Event AttributeMouse Events Attribute
Syntax of HTML onmouseout Event AttributeMouse Events Attribute
Attribute Values of HTML onmouseout Event AttributeMouse Events Attribute
Technical Details of HTML onmouseout Event AttributeMouse Events Attribute
How to Execute a JavaScript when moving the mouse pointer out of an imageMouse 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