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