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.