WebDeveloper.com �: Where Web Developers and Designers Learn How to Build Web Sites, Program in Java and JavaScript, and More!   
Web Developer Resource Directory WebDev Jobs
Animated GIFs
CSS Properties
HTML 4.01 Tags
Site Management
WD Forums

    Web Video
    Expression Web



    Forum, Blog, Wiki & CMS

 Site Management
    Domain Names
    Search Engines
    Website Reviews

 Web Development
  Business Issues

    Business Matters

    The Coffee Lounge
    Computer Issues

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


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

HTML5 Development Center

Recent Articles