HTML and CSS Reference
In-Depth Information
The
onMouseOver
and
onMouseOut
event handlers occur when the user's mouse pointer
is moved over or out of an object. The
onMouseMove
event occurs when the mouse just
touches the object. In Example 13.9, every time the user touches the button labeled
onMouseMove
with his or her mouse, a function called
counter()
is invoked to keep track
of the number of mouse moves that have taken place. That number is displayed in an alert
dialog box, as shown in Figure 13.10. If the user double-clicks the mouse anywhere on
the page, the a message will appear, and if OK is clicked, the window will be closed.
EXAMPLE
13.9
<html>
<head><title>Mouse Events</title>
1
<script type="text/javascript">
2
var counter=0;
3
function alertme(){
alert("I'm outta hea!");
4
window.close();
}
5
function track_Moves(){
6
counter++;
if(counter==1){
alert(counter + " mouse moves so far!");
}
else{
alert(counter + " mouse moves so far!");
}
}
</script>
</head>
7
<body bgColor="CCFF00" onDblClick="alertme()";>
<p><font face="arial" size=3>
Double click anywhere on this page to get out!
</p><p>
When the mouse moves over the link, an event is triggered.
8
<a href="#" onMouseOver="alert('Event:onMouseOver');" />
onMouseOver
</a></p><p>
When the mouse moves away from a link, an event is triggered.
9
<a href="#" onMouseOut="alert('Event:onMouseOut');" />
onMouseOut
</a></p><p>
When the mouse moves in or out of the button, a function<br />
is called that keeps track of how many times the mouse touched
the button.
Continues
