HTML Goodies: Script Tip: Week 4

 It's Time For Tip Four... 

  Let's get into part four, the last part of the discussion of this basic image flip 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>

You know what it does, you have seen the hierarchy statement explained, and you know what the onMouseOver and onMouseOut Event Handlers do. Now we answer the question from the last Tip:

How do two Event Handlers and two hierarchy statements sitting inside the "A HREF=" command affect the image command to post new images when the mouse passes over? First off, the image really isn't an item apart from the Event Handlers. This entire script is in the format of an HREF link using an image as the item to be clicked upon. So, the IMG command is part of the whole. Still, how does the script know to change out that image and no other? The answer lies in the hierarchy statement:

document.pic1.src We know that the "document" is this page. At the other end of the statement, we know that "src" means source. It's that thing in the middle, "pic1", that represents the IMG command. How, you ask? Well, let's have a look at the IMG command:

<IMG SRC="menu1off.gif" BORDER=0 NAME="pic1"> See the attribute, NAME="pic1"? Ta da! That's it. We named the image "pic1." Then we called for the hierarchy statement to affect something called pic1.
That's how they're linked.
That wraps up this script. Put it on your page and enjoy it.
Next Week: A New Script! Do I Really Need That LANGUAGE="javascript"?