Fading Image Rollovers

The principle behind fading rollovers is that you have 2 images "layered" over the top of each other. When you mouse over the image the foreground images fades from completely transparent to completely opaque (solid). In this way the user sees the background (underneath) image first and as the foreground (top) images starts to fade in it appears that the background image fades to become the top image. The background image is the "off" image as it is viewed on page load. The foreground (top) image is the "on" image.

<--- Mouse Over Here

<--- Mouse Over Here

One way to layer the images is to use absolutely position div's and actually position the images at the same x,y coordinates on the screen.

A much simpler way is the method we use for all the rollover examples. This involves using a <table> and placing each foreground image in a cell of the table. The background image of the table cell is set to the "off" image. This is done with the following HTML

IMPORTANT: The closing <td> tag must be right next to the closing bracket of the image tag otherwise you will get unexpected gaps & tiling of your images.

IMPORTANT: The <img> must have a class="imgFader" property to be used as a fading rollover.

Now you might ask why we haven't set the foreground image to the "on" as we said we would, so the code would look like this

There is a good reason for this. For browsers that do not support opacity, the image displayed when the page loaded would be the "on" image. This would look funny. To make the script cross browser we set both the background & foreground images to the "off" image. When you mouse over the image, the foreground image is swapped to the "on" image before the fading starts.

In browsers that support opacity, once the foreground image is swapped it is never swapped back as the image is simply faded from transparent to opaque.

In browsers that do not support opacity, on mouse out the image is swapped back to the "off" image. This allows the script to work across all browsers.

One thing you might know when you set a background image for a table cell, the image is tiled to fill the whole of the table cell's available width & height. The way to avoid this is to set the cellpadding for the table to "0" and to ensure the table cell is the same width and height as the original image. The way to do this is to only have the foreground image in the table cell and set the width & height to the correct width & height of the image. Also, unless you want gaps or borders, it is recommended that you set the cell spacing and border attributes of the table to "0". Here is the ideal setup for the image

OK we now need to add the rollover JavaScript to the image in the cell. We do this by adding a link (or anchor) around the image as follows.

Note here that we fade in/out the image 'button'. This must match the name of your image given by the name="button" attribute in the <img> tag. The name must be unique (e.g. "home", "email", "gallery").

OK, there are a couple of things missing. The first is the "on" image. To create the rollover "on" image you need to add the following to the head section of your document

Where
"button" is the name of the rollover and must be the same as the name="button" attribute.
"images/button_on.gif" is the path to the location of the image.

The functions JSFX.Rollover, JSFX.fadeIn and JSFX.fadeOut are not standard JavaScript functions. They are defined in the external JavaScript file JSFX_FadingRollovers.js, so to complete our script we need to "include" the external JavaScript file. We do this as follows

Note the
SRC="javascript/JSFX_FadingRollovers.js".
This has a similar effect as the src="images/button_off.gif" attribute of the <img> tag. It simply tells the browser where to find the file JSFX_FadingRollovers.js. If the file is in the same folder as the document the code would look like this.

Where you place the file JSFX_FadingRollovers.js is up to you as long as you make sure the src="" points to the correct place. (It is usually good housekeeping to put all images in an "images/" folder and all external javascripts in a "javascripts/" folder).

Putting it all together you should have a file that looks like this.

</BODY>
</HTML>

Which should look something like this.

To make sure that you understand what is going on, here is a document that creates 2 rollovers called "home" and "email".

</BODY>
</HTML>

Which should look something like this.

NOTE: We did not need to create another table, we just added another table cell. As long as you follow this pattern you should be able to add as many fading rollovers as you need. Also, if you remember to set the background image of a table cell to the "off" image then you can even create fading rollovers in "sliced" GUI's. See the following examples.

Fantasy Interface
GuiStuff.com Interface
Navbar1 Interface