Rollover Images

Rollover images are a simple and effective way of adding an interactive element to the images on your web site. The Home button in the top right corner of this web page is an example of a rollover image. If you move the mouse over it, you should see the picture colour change from green to red. Although this effect is achieved with JavaScript code behind the scenes, Dreamweaver provides a simple automation that creates all the necessary code for you.

Image compression effectsTypically rollovers are used as navigation controls, but there are a range of other uses too. For example, the picture on the right shows a high quality JPEG image of an orchid. If you move the mouse over the image you will see it change into an over-compressed version of the same image showing a lot of compression "artifacts". In this case, there is no link associated with the image and the sole reason is to highlight the differences between the two images in a dynamic way.

Preparing Your Images

To make a rollover you need two images: the first image is the base image and the secodn will be used as the replacement when the mouse rolls over the image. Typically these will be two versions of the same image, as the home button and the orchid examples show.

Green home button Red home button

Note that these images should both be the same size or you will get distortion effects when the rollover activates.

Creating The Rollover

As usual, there are a number of ways to create the rollover. Position the cursor where you want the image to appear and then do one of the following:

  1. From the Insert menu select the Image Objects submenu and from there select the Rollover Image option.
  2. On the Common tab in the Insert toolbar, click on the Image button dropdown and select the Rollover icon.

Both of these routes bring up the Insert Rollover Image dialog shown below:

Rollover Image Dialog

The Image name option can usually be left with Dreamweaver's suggestion. The Original image option specifies the image that will appear in the page when the page first loads, and the Rollover image option specifies the image that will be displayed when the mouse rolls over the area.

The Preload rollover image option should usually be left ticked as this improves the performance of your page by ensuring that all the necessary images are already loaded from the server when they are needed.

You should get into the habit of always proving the Alternate text when you add an image - this should be somethign descriptive of the purpose of the image. For example, if the image is providing a link, it should name the destination of the link. As discussed here, the URL option gives the address of the page to go to when the image is clicked on.

Once you have created your rollover image, you can use the techniques discussed here to position it where you want it to appear.

A Note About Flash

Adobe provides another technology for animating buttons and text on web pages: that is Flash. Flash allows you to make interactive buttons that have effects that are impossible (or at least, very difficult) to create using ordinary rollover images. Although Dreamweaver provides some powerful automation tools for creating attractive interactive, animated Flash buttons, a designer should think carefully before using these features.

Firstly, ordinary rollover images need no additional software installed on the user's machine to work. The JavaScript interpreter needed to animate the rollover images is built into the browser itself. So long as the user is allowing JavaScript code to execute, your rollover images will work. If they are not allowing JavaScript, then the base image will still display and it will still work as a link.

In contrast, for Flash to work, the user needs to have installed the Flash plugin for their browser. Whilst this may be true in the majority of cases, there are some scenarios where this will not be true. For example, Apple have decided that they will not be supporting Flash technology on the iPhone and iPad devices, so if you expect a significant number of your users to access your site through these devices, Flash is not a good choice. Without the Flash plugin, the buttons will not work and parts of your site will become unusable. Further, unlike HTML and CSS, Flash is not an open, standards-based language, it is proprietary technology.

I am not saying that you should not use Flash - far from it! It provides useful techniques. However, you should be aware of the issues when you make your choice.