Building Interactive Web Pages Part 1 - Creating and Linking Web Pages

Step Three: Create Rollover Buttons

A rollover button is a button that changes appearance when you hover the mouse pointer over or click it. To create a mouseover rollover button, we will make two identical button images with one of them appearing slightly different (a different color for the mouseover button image).

To create the first button image, click the Path Drawing Tool and draw a rectangle.

Apply G21 from the Material Gallery in the EasyPalette to the rectangle to give it a three-dimensional appearance.

Use the Text Tool to add the text, "about us", to the rectangle. Use 14 pt. Arial font and white color for the text.

Now, select both the text and the rectangle, then press [Shift + D] to duplicate it. Drag the duplicate button away from the original one. This will be the second button image for the rollover.

Apply L20 from the Material Gallery in the EasyPalette to the duplicate image. Since you are applying a different material property, the shadow behind the rectangle may be different from the original one. Right-click the duplicate rectangle, then select Shadow. In the dialog box that opens, select the first type of shadow, then change the X offset and Y offset to 3 and 5 respectively to match the settings of the first button image.

The next step is to merge the rectangle and text of each button into a single object. Make sure to select only the text and the rectangle of the first image then select Object: Merge as Single Object. Do the same for the second image.

Merge each button as a single object

Select both buttons then select Web: Rollover to open the Rollover dialog box. To choose the image to display for each state of the rollover button, which are the Default and Mouseover states, click the arrow button then choose the image to use.

Select both objects                             Specify rollover settings

To test the behavior of the rollover button, hover your mouse over the Preview window. When satisfied, click OK to create the rollover button.

For the remaining rollover buttons that you need to create, follow the same procedure.