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
CSS Properties
Database
Design
Flash
HTML
HTML 4.01 Tags
JavaScript
.NET
PHP
Reference
Security
Site Management
Video
XML/RSS
WD Forums
 Client-Side
  Development

    HTML
    XML
    CSS
    Graphics
    JavaScript
    ASP
    Multimedia
    Web Video
    Accessibility
    Dreamweaver
    General
    Accessibility
    Dreamweaver
    Expression Web

    General

 Server-Side
  Development

    PHP
    Perl
    .NET
    Forum, Blog, Wiki & CMS
    SQL
    Java
    Others

 Site Management
    Domain Names
    Search Engines
    Website Reviews

 Web Development
  Business Issues

    Business Matters

 Etc.
    The Coffee Lounge
    Computer Issues
    Feedback




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.


HTML5 Development Center


Recent Articles