Switching Images with One Smooth Move
by Heidi Brumbaugh
Greetings, and welcome to the first in a series of follow-up features to Web Developer®'s popular JavaScript tutorial. These mini-features will be task oriented, addressing specific "how-to" questions that will show you how to add those little touches to your page that add flair and help you better communicate your content to your visitors. We'll try to choose topics based on what you, the readers, want to learn how to do.
Thanks to everyone who responded to my JavaScript tutorial.
I received many great questions, but the most common by far was: How can I change an image on an HTML page when the user passes the mouse over it? There are two parts to this question: How to change the image, and when to change it.
How to Change It
The key to pulling this switch is understanding the way JavaScript latches on to native HTML script tags. Recall from the tutorial that in object programming, a property is a characteristic of an object. These properties are initially defined in an HTML tag. For example, the image tag for the half-sized Web Developer® logo used in this example is:
<IMG src="logo50.gif" width="177" height="52">Fortunately for the task at hand, JavaScript lets us change the value of src.
Because there may be many image tags in a given page, we need a way to refer to one specific tag. We do this by assigning a unique name to this tag with the name keyword:
<IMG name="ImageOnly" src="logo50.gif" width="177" height="52">Now we can use the identifier ImageOnly elsewhere on the page to refer to this particular image. Note: The name keyword is used frequently in JavaScript, and can be used to assign identifiers to such objects as forms, documents, frames, and so on.
To change the value of a property, separate the name from the property you wish to change with a period. Thus, to change the logo in this example we'd use
ImageOnly.src='js.gif'[ Click here to move to the next part of the article ]
Web Developer® Site Feedback
Web Developer®
Copyright © 2000 internet.com Corporation. All rights reserved.