Simple Image Rollovers

(First Draft)

First the warning. Scripts in web pages are not reliable! The web browser and user are in control of your script being run, not you. Your script can easily be incompatible with the users web browser. If you are going to use a script then it should be done in some fashion that recognizes the potential for the script to fail. This means your page must be designed to be usable even if the script doesn't work. It also means that you should include error handling in your script that hides any potential error messages. Don't let (from their perspective) your broken code harass them.

The head section of your page should always contain the following Javascript:

Hopefully, how the above script works will be obvious to you.

With that said image rollover effects can be very easy to achieve. The HTML language provides event attributes for most of its elements, including the image tag. The onmouseover and onmouseout events are ideal for performing image rollovers. The method shown on this page puts the rollover Javascript code in the onmouseover and onmouseout values. This is as easy as rollovers get.

Images should be preloaded in some way to prevent the image from having to be downloaded to do the rollover. There are two very simple ways to do this. Image tags referring to the secondary images can be placed in the document before the image(s) that will be rolled over with 0 value width, height and border properties. Images can also be preloaded by the Javascript as will be shown below.

Sample image tag for preloading an image:

The empty title in the above example is probably overkill. It is a habit I've gotten into for preventing IE from using alt values as tool tips when a title doesn't exist. Getting in a habit like this thanks to IE not complying to standards probably deserves a rant, but I'll just consider it another brick.

Sample Javascript for preloading an image:

imgRolled = new Image(50,50); // Width, Height
imgRolled.src = "rolled.gif";

The code above should be added to the end of the error handling script, if you decide to preload your images this way.

A brief note about script location. Where the Javascript is located in your pages code does matter. It should be located before the first event that it can be called from to eliminate the possibility of a Javascript Function being called that doesn't exist yet. Your error handling function cannot deal with errors if it doesn't exist! Note: Not including that error handling code is almost suicidal, but you should probably make it the last code you add to your page to minimize debugging problems.

The image tags that you will be rolling the images over in should be named, (Have a name attribute specified) so that you will be able to refer to them and their attributes from the Javascript. I really recommend using the Javascript Dom (Document Object Model) not the W3C or IE Doms for name reference for maximum browser compatibility. It is all I will show in my example code. You can use the keyword "this" to refer to your image tag(s) instead of names, but your code will not be quite as browser compatible.

Sample image tag for an image that will be rolled over:

Note the use of the single quotes in the Javascript for the onmouseover and onmouseout events. The substition of single quotes for double quotes allows nested quotation blocks.

Hopefully this has been enough to get you started.

Happy Image Flipping,

JimD