/beyond/javascript/stips/article.php/3471631/HTML-Goodies-Script-Tip-Week-3.htm HTML Goodies: Script Tip: Week 3

HTML Goodies: Script Tip: Week 3

By Joe Burns

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

Next Week: How The Image and Script Are Linked


Learn to write your own JavaScripts with the
HTML Goodies 30-Step Primer Series
and take the knowledge home with you in
JavaScript Goodies!

You can find many other uses for JavaScript
on your Web pages here!

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date