SHARE
Facebook X Pinterest WhatsApp

HTML Goodies: Script Tip: Week 4

Written By
thumbnail
Joe Burns
Joe Burns
Jan 4, 2005

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



     Do YOU have a Script Tip you’d like to share? How about suggesting a Script Tip to write about? I’d love to hear it. Write me at: jburns@htmlgoodies.com.


Learn to write your own JavaScripts with the
JavaScript Goodies!



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

Recommended for you...

The Revolutionary ES6 Rest and Spread Operators
Rob Gravelle
Aug 23, 2022
Ahead of Time (AOT) Compilation in Angular
Tariq Siddiqui
Aug 16, 2022
Converting a JavaScript Object to a String
Rob Gravelle
Aug 14, 2022
Understanding Primitive Type Coercion in JavaScript
Rob Gravelle
Jul 28, 2022
HTML Goodies Logo

The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.

Property of TechnologyAdvice. © 2025 TechnologyAdvice. All Rights Reserved

Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.