onMouseover & onMouseout


The onMouseover javascript is a good one to start with because you will not have to write any code in the <HEAD> area. On the other hand, this is sort of a boring and useless example. On the first hand it does introduce some important things. Here goes.
In this example, when you move the mouse over some text a message will appear in the status bar at the bottom of the screen. Here's the code:

<A HREF="onMover.htm" onMouseover="window.status='Want some candy?'; return true">Point your mouse here.</A>

Here is an example. Go ahead and try it.

Point your mouse here.

Incredible!!! But it doesn't go away. To do this you need to add an additional command, the onMouseout command::

<A HREF="onMover.htm" onMouseover="window.status='Want some candy?'; return true" onMouseout="window.status=' '; return true">Point your mouse here.</A>

Here is the example. Try it also.

Point your mouse here.

You can also do other things with the onMouseover and onMouseout commands. Here is the code and below that an example of some script that changes the back ground color using the onMouseover command.

<A HREF=""onMouseOver="document.bgColor='black'">Black</a>
<A HREF=""onMouseOver="document.bgColor='green'">Green</a>
<A HREF=""onMouseOver="document.bgColor='yellow'">Yellow</a>
<A HREF=""onMouseOver="document.bgColor='red'">Red</a>
<A HREF=""onMouseOver="document.bgColor='brown'">Brown</a>
<A HREF=""onMouseOver="document.bgColor='white'">White</a>

Black Green Yellow Red Brown White

Is that annoying or what?



Retrun to JavaScript Index   Retrun to Home Page