mouseout | onmouseout event (Windows)

This topic has not yet been rated - Rate this topic

Fires when the user moves the mouse pointer outside the boundaries of the object.

Syntax

HTML Attribute	<element onmouseout = "handler(event)">
Event Property	object.onmouseout = handler;
addEventListener Method	object.addEventListener("mouseout", handler, useCapture)

Event information

Synchronous	No
Bubbles	No
Cancelable	No

Event handler parameters

pEvtObj [in]: Type: IHTMLEventObj

Standards information

HTML 4.01 Specification, Section 18.2.3

Remarks

When the user moves the mouse over an object, one onmouseover event occurs, followed by one or more onmousemove events as the user moves the mouse pointer within the object. One onmouseout event occurs when the user moves the mouse pointer out of the object.

Initiates any action associated with this event.

To invoke this event, do one of the following:

Move the mouse pointer out of an object.

Examples

This example uses the onmouseout event to apply a new style to an object.


<body>
<p onmouseout="this.style.color='black';" 
    onmouseover="this.style.color='red';">
Move the mouse pointer over this text to change its color. 
Move the pointer off the text to change the color back.
</p>
</body>

This example shows how to swap images on mouse events.


<head>
<script type="text/javascript">
function flipImage(url)
{
    if (window.event.srcElement.tagName == "img" )
	{
		window.event.srcElement.src = url;
    }
}
</script>
</head>
<body>
<p>Move the mouse over the image to see it switch.</p>
<p>
<img src="/workshop/graphics/prop_ro.png" 
    onmouseover="flipImage('/workshop/graphics/prop_rw.png');" 
    onmouseout="flipImage('/workshop/graphics/prop_ro.png');">
</p>
</body>

mouseout | onmouseout event