## Dynamic buttons and text

Dynamic buttons change appearance when the user moves the mouse pointer over them; this is referred to as a rollover. Rollover text is similar, and changes appearance when the user moves the mouse pointer over it.

### To create rollover buttons

- Create three versions of your button: A normal version, a version to be displayed when the user moves the mouse pointer over the button, and a version to be displayed when the user clicks the button:

- For convenience give the items appropriate names, such as Normal, MouseOver, and Click on the item general settings panel of the Inspector palette:

- Select all three items.
- Open the Item menu and choose Align....
- Click the Horizontal center align and Vertical center align icons, and click the OK button:

The items will be aligned into a stack with them still selected:

- Open the Item menu, choose Actions, then choose Rollover from the submenu.
- Open the Window menu and choose Actions to display the Actions palette.

This allows you to specify which image should be displayed for each of the conditions: Normal, MouseOver, and Click.

Initially there is a checkmark against each image in the Normal column, so the images are all visible in the normal state.

- Click to remove the checkmark from the Normal column for the MouseOver and Click images, and click to add a checkmark in the appropriate MouseOver and Click columns for these images:

You can click each column heading to preview the graphic corresponding to that state.

You can now preview the effect of your rollover button:

- Click the Preview tab at bottom right of the Freeway window.

You can also use the Rollover action to trigger slave images; see Slave images and layers.

### To create a text rollover

The Text Rollover action can be used to trigger slave effects when the mouse moves over a text link.

- Position the insertion bar in the HTML item where you want to create the text rollover:

- Open the Insert menu, choose Action Item, then choose Text Rollover from the submenu.

A text rollover action will be inserted at the insertion point.

- Click outside the HTML item, then click to select the text rollover item:

- Open the Window menu and choose Actions to display the Actions palette.
- In the Text field enter the text to be displayed for the rollover.
- Choose Indigo from the Slave Group pop-up menu.
- Choose the number of the image you want to display from the MouseOver # pop-up menu:

You have specified that the rollover action will send trigger 1 to slave group Indigo. The next step is to define a slave to be triggered.

A typical use of the text rollover is to display a hidden picture when the user moves the mouse pointer over the text.

- Select a graphic item containing a picture.
- Open the Item menu, choose Actions, then choose Slave Image from the submenu.
- In the Actions palette uncheck the image in the Normal column, so the image is not normally displayed, and check the image in the Image 1 column, so that it is displayed by trigger 1:

- In the Parameters panel ensure that slave group is set to the same slave group as the text rollover, Indigo:

The image will now be displayed when the user moves the mouse pointer over the text rollover:

If you also want the text rollover to act as a hyperlink, you can define it as a link in the usual way by selecting it and then using the Edit Hyperlink dialog box.

Contents