Creating a Button Rollover

You can use the Set Image and Use Image actions to give three-dimensional feel to a button, for example, by highlighting it when the site visitor’s pointer passes over it, by making it appear pushed in when pressed, and so on.

For this example, you need three pictures of a button—one showing how it looks when the page loads, one showing it highlighted, and one showing it pressed.

Note:
This example applies to images of buttons, but not to form buttons. The Set Image action is not available for form buttons.

  1. In Page view, place the picture of the button as it looks when the page loads.

  2. To add an action to the button, click the Action tab on the Picture Properties palette, and click the plus (+) button.

    The Set Action dialog appears.

  3. In the When field, from the Page drop-down menu choose Page Loaded. Click the Target Menu button next to the Target field and, from the Object Tree dialog that appears, select the button object. In the Message field, from the Object drop-down menu choose Set Image.

  4. From the Parameters drop-down menu, choose Values.

The Parameters dialog appears.

  1. Identify when to use which picture file. Make sure the “loaded” version of the button is selected for the Image 1 (Normal) value. Then select the highlighted button for Image 2 (Highlighted), and the pressed version for Image 3 (Depressed).


 

  1. To specify a picture file in a Set Image action’s Values dialog, select a value, click the button next to the edit field, and open a file from the Picture File Open dialog. Click OK.

  2. Add four actions to the button, filling out the Set Action dialog for each action like this:

Action 1. Enter Mouse, Mouse Over in the When field; the button itself in the Target field; and Object, Use Image in the Message field. Then open the Parameters menu and click Image 2 (Highlighted).

Action 2. Enter Mouse, Mouse Out in the When field; the button in the Target field; Object, Use Image in the Message field; and Image 1 (Normal) in the Parameters field.

Action 3. Enter Mouse, Mouse Down in the When field; the button in the Target field; Object, Use Image in the Message field; and Image 3 (Depressed) in the Parameters field.

Action 4. Enter Mouse, Mouse Up in the When field; the button in the Target field; Object, Use Image in the Message field; and Image 2 (Highlighted) in the Parameters field.

To link the rollover button to another page, you can add one more action. In the When field, from the mouse drop-down menu choose Clicked, in the Target field choose layout, in the Message field from the Location menu choose Go to URL, and in the Parameters field from the drop-down menu choose Values and select the link to go to.

  1. Preview the page to test your rollover. Mouse over the button to see it highlighted, and click it to see it pushed in.