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.
2

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.
4

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.
2

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

OR

Choose Rollover Image from the Insert menu
3

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 |