EIW Fall 2004 JavaScript Example: mousemove

<!-- Javascript: display mouse coordinates -->
<HTML>
<HEAD>
<TITLE>Mouse coordinate display</TITLE>
</HEAD>
<SCRIPT>
// update the mouse coordinates display
function updateDisplay(event) {
   c = document.getElementById("coordinates");
   c.innerHTML = event.clientX + ", " + event.clientY;
}

function clearDisplay() {
   c = document.getElementById("coordinates");
   c.innerHTML = " not over the red paragraph right now";
}
</script>

<BODY>
 
<H1>Sample Document</H1>

<H3>Coordinates: <span id=coordinates>not over the red paragraph right now
</span></H3>

<P>Here is some stuff.
Here is some stuff. Here is some stuff. Here is some stuff.
Here is some stuff. Here is some stuff. Here is some stuff.
Here is some stuff. Here is some stuff. Here is some stuff.
Here is some stuff. Here is some stuff. Here is some stuff.
Here is some stuff. Here is some stuff. Here is some stuff.
</P>
<HR>

<P style="font-family:sans-serif; color:red"
   onMouseMove="updateDisplay(event)"
   onMouseOut="clearDisplay();"
>
Here is some stuff. Here is some stuff. Here is some stuff.
Here is some stuff. Here is some stuff. Here is some stuff.
Here is some stuff. Here is some stuff. Here is some stuff.
Here is some stuff. Here is some stuff. Here is some stuff.
Here is some stuff. Here is some stuff. Here is some stuff.
</P>

<P>You should see the mouse coordinates change whenever the mouse is
over the red paragraph</P>
</BODY>