JavaScript Primers #15

By Joe Burns

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


Deconstructing 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>

From what you already know about Event Handlers, you should be able to pick this one apart by yourself. When the mouse is off, the image "menu1off.gif is shown. When the mouse is on the image, the "menu1on.gif" image is shown.

Notice the IMG command is linked to the onMouse Event Handlers in the HREF command through that NAME="pic1" command. You'll need that to link the two commands together.

Here's the Deal:

  • Both onMouseOver and onMouseOut are case-sensitive. Capital and lowercase letters may not be changed.
  • Because quotes are required after onMouseOver= or onMouseOut=, the name of the .gif file must be surrounded with single quotes not double quotes.
  • document.pic1.src follows the hierarchy of objects outlined in Primer #8. "Document" refers to the current HTML document object and "pic1" is the name of this image object (we made up that name). "src" is a property of the image object that allows you to declare the picture file.
  • In this example, the onMouseOver event changes the picture source to 'menu1on.gif'.
  • The onMouseOut event causes the picture object to display 'menu1off.gif'.
  • Remember that swapping pictures works best when the pictures are the same size.

What You Have Learned


Your Assignment

Create an HTML page. Center everything on the page. Use H1 tags with your name. Under that, place Bubble1.gif. When you move your mouse over this image it should switch to Bubble2.gif. When you move the mouse away from the link, Bubble1.gif should appear again.

The output should look like this:

Andree Growney

Here's the answer to this assignment
(this will open a new window)


The Concept
The Script
The Script's Effect
Deconstructing the Script
What You've Learned
Your Assignment



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •