Create rollover buttons

In GoLive you can add rollovers by adding an image placeholder from the Basic set of the Objects palette and setting rollover properties in the Rollovers & Actions palette.

The Detect Rollover Image feature (on by default) automatically assigns Over and Down rollover images in one step when you specify the filename of the normal image. For example, if you name your normal image “rollover,” GoLive automatically looks for and references “rollover _over” and “rollover_down.” In this tutorial, we assume you’ve followed this naming convention for your rollover images.

1. First, we’ll add a layer to the page to hold the rollover button: Click the Basic set button at the top of the Objects palette, and drag the Layer icon to an empty area of the document window. Make sure that the layer is selected, and enter a name for the layer in the Layer Inspector. Enter pixel values for width and height.

2. Drag the Image icon from the Basic set of the Objects palette to the empty layer in the document window.

   

   Dragging Image icon to layer

   

3. Choose Window > Rollovers and Actions to open the Rollovers & Actions palette.

4. In the Files tab of the site window, locate the image you want to use for the first (Normal) state of the rollover button.

5. Making sure the Normal icon is selected in the Rollovers & Actions palette, drag the image from the Files tab of the site window to the selected image holder.

   If you followed the naming conventions mentioned earlier in this section, notice that the Detect Rollover Images feature automatically references the Over and Down images in the Rollovers & Actions palette.

   

   Referencing the Normal image automatically references the Over image if the files are named correctly

6. In the Rollovers tab of the Rollovers & Actions palette, click the Over icon to select it. Verify that the correct path and file name appear in the text box. Repeat this step to verify the Down icon.