Article
Mouseover Images
Advanced Techniques
Finally, this section will show you a simple way to make sure your mouseover pages are compatible with older browsers, as well as a neat trick to prevent preloading mouseover images from slowing down the rest of your page.
Browser Compatibility with Object Detection
Now that you know all about how to make mouseovers that work well, it's worth taking a moment to learn how to make ones that don't work just as well. While mouseovers of the type I've outlined up until now will work consistently on all recent JavaScript-enabled browsers (Netscape 3+, as well as MSIE 4+), there are some browsers that support JavaScript, but don't fully support the image object.
One such browser is Microsoft Internet Explorer 3.0. If we were to load a page that contained mouseovers with the code I've used up until now on MSIE 3.0, we'd see a lot of ugly JavaScript errors. Since we can't do Mouseovers on this browser, the least we can do is get rid of the error messages.
While there are several ways to detect the version of the user's browser in JavaScript and react accordingly, such techniques can sometimes prove unpredictable in the face of less mainstream Web browsers. Also, whenever either Netscape or Microsoft release a new version of their browser software, any page using such browser detection scripts would need to be updated.
Much more reliable and efficient is a little-known technique called object detection. The idea is that, instead of detecting the version of the browser, we detect the features that the browser supports. As any browser that supports the image object will be capable of mouseovers, we need only detect whether or not the browser knows what image objects are before we do anything that requires support for them. This is done with a simple if statement:
if (document.images) {
... code here ...
}
Which can be read:
"Ifthe currentdocumentcontainsimagesthen do the following..."
If we add an if (document.images) to the activate and deactivate functions, and place one around the image declarations, we'll have mouseovers that quietly disappear on browsers that don't support the image object.
Delaying Image Loading
Preloading images is all well and good, but what if you have 20 mouseovers on a given page? Do you really want to have the browser busy downloading 20 images before it even gets to start loading the actual content of the page? Usually not. A nice way around this is to use the onLoad event handler of the <BODY> tag to trigger a function that loads the mouseover images only after the HTML code for the page has been loaded. This way, all the images actually displayed on the page are put ahead of the mouseover images in the download order.
The use of onLoad is fairly straightforward:
<BODY onLoad="loadImages()">
All that's left is to put the preloading of the mouseover images inside the loadImages() function.
if (document.images) {
var first_off = new Image();
var first_on = new Image();
var second_off = new Image();
var second_on = new Image();
var third_off = new Image();
var third_on = new Image();
}
function loadImages() {
if (document.images) {
first_off.src = "off1.gif";
first_on.src = "on1.gif";
second_off.src = "off2.gif";
second_on.src = "on2.gif";
third_off.src = "off3.gif";
third_on.src = "on3.gif";
}
}
Be sure to notice that I've left the creation of the JavaScript-only image objects outside the loadImages() function. This is done for two reasons. First, the creation of the objects doesn't load any files: only the setting of the src properties does that, so leaving the object declarations outside the function won't slow down the loading of the rest of the page. Second, objects or variables that are created inside a function only exist inside that function. If we were to move the creation of the image objects inside the function, they would disappear as soon as the function finished running, and then the activate and deactivate functions would no longer be able to use them.
That's it! Now our mouseover images will only be loaded when the onLoad event handler of the <BODY> tag is triggered, and this only happens once the HTML code for the whole page has been loaded, and any images on that page have started loading. Whether this is desirable or not is up to you to judge, but it can be a good idea in cases where there are a lot of mouseovers on a page and their being immediately available is not that important.
In Summary
In this article I've endeavored to present a complete picture of the techniques involved in making Web page elements respond to the movement of the user's mouse. Not only did I cover the basics in terms that, hopefully, were accessible to anyone with a rudimentary knowledge of Web design and general programming, but I also covered some more advanced topics that would prove useful to the more experienced Web developer.
More information related to this article can be found at:
- CNET BUILDER.COM's SuperScripter: "The mighty Mouseover machine"
- Web Review's Web Coder: "The MegaCoder Rollover Script Generator"
- Netscape's JavaScript Guide
- Microsoft Scripting Technologies