Mouse Commands

JavaScript allows you to create event handlers that causes something to happen when the user does something. This tutorial covers several events that occur with the user's mouse. The idea of event handlers will become clear after we show a few examples.

Using JavaScript, we can cause several different events to occur when the user passes the mouse pointer over an object or a link by using the commands onMouseOver and onMouseOut. When the user passes over a link, for example, we can put a message in the status bar of the browser window. You may have noticed that when you take your mouse over the list of tutorials in the WebPage Tutor menu that a message appears in the status bar. Here is what the code looks like to do this:

<A HREF="page.html" onMouseOver="window.status='enter message here';return true">Link</A>

Notice the placement of the single quotes and double quotes. It is very important to distinguish between the two. We can also place a message in the status bar when the user takes the mouse off of the object or link by using onMouseOut (*Please note that onMouseOut doesn't work with some versions of Internet Explorer*). Here is what it will look like:

<A HREF="page.html" onMouseOut="window.status='enter message here';return true">Link</A>

These can be used in combination with each other. Here is what it will look like:

<A HREF="page.html" onMouseOver="window.status='message';return true"
onMouseOut="window.status='enter message here';return true">Link</A>

This page has been accessed

times since June 24, 2001