onMouseOver and onMouseOut

Use this to perform different functions based on mouse position.

 

<A HREF="javascript:void(null)"
   onMouseOver="window.status='Pucker up, big boy!'; document.getElementById('mo').innerHTML='Pucker up, big boy!'; return true;"
   onMouseOut="window.status='Oh, come on! We were just getting started!'; document.getElementById('mo').innerHTML='Oh, come on! We were just getting started!'; return true;">
<IMG SRC="lips.jpg">
</A>

<P id="mo">&nbsp;</P>

document.getElementById('mo').innerHTML DHTML will be introduced in Week 9, but this little bit should be fairly easy to understand. 

document.getElementById('mo') says go to the element with the id equal to "mo"

innerHTML is the "stuff" between the opening and closing tags with id="mo"

So putting all the above information together, onMouseOver replace whatever is in between the <P>'s with id="mo" with 'Pucker up, big boy!'

The onMouseOver and onMouseOut both put messages in the Status Line. In this example there is a message as the mouse goes over an HREF and then there is a different message as the mouse leaves the HREF.

The onMouseOver and onMouseOut work over an HREF, whether it is an image or hyperlink. This was discussed in the Event Handler Section under Method 1.