Core Computer: Dreamweaver Notes

Rollovers in Dreamweaver

A rollover is an image which changes when the pointer is passed or "rolled" over it. What the browser is doing is switching between two images.

A rollover actually consists of two images: the first image which is the image that is displayed when the page first loads and the rollover image which is the image that appears when the pointer moves over the first image. When you create a rollover, both images must be the same size.

Firstly you have to have two images prepared and saved as either JPEG or GIF image files. These two files will become your roll over. They have to be exactly the same size in other words exactly the same pixel dimensions.

What you are doing when you create a roll over is to attach what is called a behaviour to an image. A behavior is a combination of an event and an action. Events are situations that trigger actions. In other words when the user does something such as passes their cursor over an image something happens.

The way it works is, an event called onMouseOver can occur when the user passes their pointer over the an area in this case an image, the mouse passes or "rolls" over an object. Actions are JavaScript code that perform specific tasks, such as in this case displaying a second image. When ever you are attaching a behavior to a page or element in a page, you have to specify both an action and the event that triggers it.

First open the Behavior inspector, so you can see what is happening as this lists all behaviors defined for a selected element.

Window > Behaviors

Notice it is the tab next to the Layers palette.You can see what is happening as you create your rollover.

In the Events For pop-up menu, set this to 4.0 and Later Browsers.

From the Insert menu go to

Insert >Interactive Image> Rollover Image.

The dialog box appears: Browse and select an image, in the Original Image field.

Next Browse and select a second image, which will appear as the rollover image in the Rollover Image field. Remeber both images have to be the same pixel dimensions.

To create a link, browse and select a file.

Select the PreloadRollover Image option.

Accept the default settings for preloading and restoring images as the Preload Images option loads the rollover image into the browser's cache. This means that when the user first moves the mouse over the image, there is no noticeable delay before the highlight image appears. The Restore Images onMouseOut option returns the image to its original state when the user moves the mouse pointer away from it.

Click OK.

The Behavior inspector now includes the events and actions you just defined for the image.

To test a rollover:

You can test if it is working by going to

File > Preview in Browser.

or using the drop down menu from the small globe icon at the top of your page.

When the page is in the browser, move your pointer over the image. The first image should switch to the rollover image.

If you already have an image on a page and want it to be a Rollover:

Open the Behavior inspector

In the Behaviours inspector add an action to the image by clicking the plus (+) button and choosing Swap Image from the pop-up menu.

The Swap Image dialog box appears.

The Images list, is a list of all images on the page. Make sure that you are applying the roll over to the right image. This is where it is helpful to name your images clearly. The first image which will be replaced is listed. Now you have to define which image is the swap image which will act as the roll over when the mouse pointer passes over it.

Click Browse to navigate to your Images folder, select your image that will replace the original and click Choose. This image appears on screen during the onMouseOver event.

Click OK

The Behavior inspector now includes the events and actions you just defined for the image.

Check your document and the roll over in the Web browser. When you finish previewing the file, close the browser window. Return to Dreamweaver and save the changes you have made to the page.

These notes are written for students who undertake the Core Computer course at School of Art, Australian National University. Students of the course should feel free to contact any member of staff with comments questions and general suggestions..

< Home Index > < Staff Contact > < Class groups > < Assessment >

< Basics Module > < Photoshop 1 Module> < Photoshop 2 Module> < Illustrator Module > <3D Module > < Web Design Module >

< Terms and Jargon > < Online Resources >