HTML Goodies: Script Tip: Week 3

 Hello, again, Tippers...

Let's spend a little more time looking at how this basic image flip actually works its magic. Here's the code again:

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

If you're far enough along in your HTML knowledge, you have already noticed that the image flip is put together in the form of a hypertext link.
In the "A HREF=" statement, there are two strangely capitalized items: onMouseOver and onMouseOut. Those two JavaScript commands are what are known as "Event Handlers."
An Event Handler is a dream for us HTML coders in that it does not require that we set it aside with its own <Script Language="javascript"> and </Script> commands. These Event Handler commands sit right in the HTML you already know how to create. What a concept! (What was the name of the comedian who always said that? My wife and I can't come up with it.)
onMouseOver tells the browser to do something when the mouse is passed over the item. onMouseOut, as if you didn't already know, does something when the mouse leaves the area, no SCRIPT commands needed. These Event Handlers just sit right inside the "A HREF=" command and work from there.
You'll notice in the code that the Event Handler is pointed at the hierarchy statement that we talked about in last week's Script Tip. That statement is telling the browser where to find the image. Remember that?
So, you may be asking, how do two Event Handlers and two hierarchy statements sitting inside the "A HREF=" command affect the image command to post the new images when the mouse passes over? That's a solid question, indeed!