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

JavaScript Q&A Mailbag

by Heidi Brumbaugh

Thanks to all the people who have been sending me their questions and feedback on this series. I want this to be a place where you can come for the information you need, and the only way I can do that is if you tell me what you're interested in.

Tips are welcome, also, especially those hard-won kind that will help your fellow JavaScripters. And corrections, of course, which brings us to the first order of business: The Final Word on Internet Explorer and mouseovers.

My article on mouseovers (Switching Images in One Smooth Move) and my article on browser detection (Browsers, Shmousers) said that you can change images on the fly in Navigator 3.0 and above, but not Internet Explorer. Unfortunately this is only partly true. It turns out IE 4 does support the mouseover event and the IMG object. I apologize for any confusion this may have caused. This error creeped in because I was foolishly relying on the Microsoft documentation, rather than trying it out in IE 4 myself, which wasn't installed on my system at the time (lucky you! -- Ed.).

I've gotten lots of mail on the mouseovers topic: corrections and questions and suggestions for variations on this theme. Judy Smith complains that the pictures don't show up until she runs her mouse over them. "How do I make sure that a picture is present when someone looks at my page?"

What's happening here is that the browser has to go back to the server for the image when the onMouseover event triggers. You can preload the image by creating an image with JavaScript's new keyword, and then loading the src property of the image you created. Here's what that looks like:

 SecondAlien = new Image() SecondAlien.src = "alien2.gif" 

Now use this object to switch the images:

 <A HREF="javascript:void(0)" onMouseover="document.Alien.src=SecondAlien.src" onMouseout="Alien.src='alien1.gif'"> <IMG SRC='images/alien1.gif' BORDER="0" NAME="Alien" width="75" height="68"></A> 

Click here to see the example.

[Move on the Part II]

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

HTML5 Development Center

Recent Articles