DHTML Events
Fires when the user moves the mouse pointer out of the object.
| Inline HTML |
<element onmouseout = "handler" ... > |
All platforms |
| Event property |
object.onmouseout = handler |
ECMA-262 Language Specification |
| Named script |
<script FOR=object EVENT=onmouseout> |
Internet Explorer® only |
| Bubbles |
Yes |
| Cancels |
No |
| To invoke |
Move the mouse pointer out of an object. |
| Default action |
Initiates any action associated with this event. |
A mouseout event occurs when the pointing device is moved away from an element. This event is valid for most elements.
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 pointer within the object. One onmouseout event occurs when the user moves the pointer out of the object.
While event handlers in the Document Object Model do not receive parameters directly, the handler can query the event object for data.
Event Object Properties
| altKey |
Retrieves the current state of the ALT key. |
| button |
Retrieves which mouse button, if any, is pressed. |
| cancelBubble |
Sets or retrieves whether the current event should bubble up the hierarchy of event handlers. |
| clientX |
Retrieves the x-coordinate of the position of the cursor when the mouse is clicked, relative to the size of the client area of the window but excluding window decorations or scroll bars. |
| clientX |
Returns the y-coordinate of the position of the cursor when the mouse is clicked, relative to the size of the client area of the window but excluding window decorations or scroll bars. |
| ctrlKey |
Retrieves the state of the CTRL key. |
| fromElement |
Retrieves the object the cursor is exiting during the onmouseover and onmouseout events. |
| offsetX |
Retrieves the horizontal coordinate of the mouse's position relative to the object firing the event. |
| offsetX |
Retrieves the vertical coordinate of the mouse's position relative to the object firing the event. |
| screenX |
Retrieves the horizontal position of the mouse, in pixels, relative to the user's screen. |
| screenY |
Retrieves the vertical position of the mouse, in pixels, relative to the user's screen. |
| shiftKey |
Retrieves the state of the SHIFT key. |
| srcElement |
Retrieves the object that fired the event. |
| toElement |
Retrieves the object being moved to as a result of an onmouseover or onmouseout event. |
| type |
Retrieves the event name from the event object. |
| x |
Returns the horizontal position of the mouse when the event fires. |
| y |
Returns the vertical position of the mouse when the event fires. |
The first example shows how to use the onmouseout event to apply a new style to an object. The second demonstrates how to swap images on mouse events.
Sample Code
<div align="center">
<h5 id=theTxt onmouseover="this.style.color='lime';"
onmouseout="this.style.color='';">
Move the mouse pointer over this text,
then move it elsewhere in the document.</h5>
</div>
<div align="center">
<img src="abkd_link.gif" height=45 width=120
onmouseover="flipImage('abkd_over.gif');"
onmouseout="flipImage('abkd_link.gif');">
</div>
<script language="JavaScript">
function flipImage(url){
if (window.event.srcElement.tagName == "IMG" ){
window.event.srcElement.src = url;}}
</script>
Show me
onmousedown, onmousemove, onmouseover, onmouseup
