Simple Links 103

Creating Images for Rollovers

1 Determine or decide the dimensions of your intended rollover. Create a Photoshop document with those dimensions.
For instance: 4 link buttons/rollovers across a 480 pixel wide splash screen = 120 pixels wide for each rollover/button image.

Create an original image on one layer. It can be text or an image.

Duplicate the layer and modify this layer to represent the rollover image state.
Choose Layer ->Effects. Add a glow, delete the shadow, or brighten the color to taste.
3 Toggle the layer visibility to Save each for Web... as a .gif or .jpeg. Place them in your Images folder.

Follow the directions below for Creating a Rollover in Dreamweaver with these two images

Creating a Rollover in Dreamweaver

(according to Using Dreamweaver in the Help menu)

A rollover is an image that changes when the pointer moves across it.

A rollover actually consists of two images: the primary image (the image displayed when the page first loads) and the rollover image (the image that appears when the pointer moves over the primary image). When you create a rollover, both images must be the same size; if the images are not the same size, Dreamweaver automatically resizes the second image to match the properties of the first image.

To create a rollover:
1 In the Dreamweaver's document window, place the insertion point where you want the rollover to appear.

Insert the rollover by using one of these methods:
Choose Window > Objects to open the Object palette, and click the Rollover button.


Choose Rollover Image from the Insert menu


In the dialog box that appears, enter the following information:
Browse and select an image, or type the path and file name of the original image in the Original Image field.
Browse and select a rollover image, or type the path and file name of the rollover image in the Rollover Image field.

To create a link, browse and select a file, or replace the # in the Link field with a path and file name.
To have Dreamweaver preload the images in the browser's cache, select the Preload Images option.

Click OK.

To test a rollover:

1 Choose File > Preview in Browser.
2 In the browser, move the pointer over the primary image. The display should switch to the rollover image.

Simple Links
| Text Links | Image Maps | Rollovers |