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
Part 2

by Heidi Brumbaugh

When to Change It

The tutorial showed you how to respond to events. In this case let's change the picture in response to the onMouseOver event. One slight problem: The IMG tag doesn't have mouse events. Our solution: Enclose the IMG tag in a link object, which can respond to mouse events. One more slight, slight problem: A link object wants to do something if the user clicks on it, but we just want the link so we can grab its onMouseOver event. Up our sleeve: The trusty JavaScript void(0) command, which does, well, nothing. Here's the complete syntax for the example:

<A HREF="javascript:void(0)" onMouseOver="ImageOnly.src='js.gif'">
<IMG name="ImageOnly" src="logo50.gif" width="177" height="52"> </A>

Go ahead and try out the example

Getting Fancy

If you want to change the image back, try using the onMouseOut event to reassign the src to the original file. If you want even finer control over the mouse movements, try reprogramming this example inside an image map. By setting the event handler inside an tag, you can respond to user movements inside specific coordinates. This example works in Navigator 3.0 and above but not, unfortunately, Internet Explorer.

Update: The most current JavaScript documentation is Netscape's JavaScript Reference.
Find out how to verify forms using JavaScript.
Heidi Brumbaugh has been a writer and editor in the computer publishing industry for ten years. Feel free to visit her home page.

Web Developer® Site Feedback
Web Developer®
Copyright © 2000 internet.com Corporation. All rights reserved.

HTML5 Development Center

Recent Articles