JavaScript Primers #15

Use these to jump around or read it all

The Concept

The Script

The Script’s Effect

Deconstructing the Script

What You’ve Learned

Your Assignment

The Concept

This example introduces you to advanced uses of onMouseOver
and onMouseOut events. Remember that with object-oriented or object-based programming, an event triggers a function or JavaScript statement to run. Remember the onLoad command in the body that called for the JavaScript in the HEAD commands?

The two events demonstrated here occur when you move your mouse over a link or move it away from the link. This is pretty much the same thing you did when you used these Event Handlers to get text to appear in the status bar. Remember that from Primer #4?

Notice again that there is no need for the <SCRIPT> and </SCRIPT> tags. The JavaScript onMouseOver and onMouseOut events are built into the <A HREF> HTML tag. Also notice that by including BORDER=”0″ in the <IMG SRC> tag, no link box appears around the image.

The Script

<A HREF=”http://www.cnn.com”

onMouseOver=”document.pic1.src=’menu1on.gif'”

onMouseOut=”document.pic1.src=’menu1off.gif'”>

<IMG SRC=”menu1off.gif” BORDER=0 NAME=”pic1″>

</a>

The Script’s Effect