TIP 103: Fun with Buttons
Who said buttons have to be boring! In Tip 97, you saw how to construct a basic button, and in Tip 98, you learned how to customize the button's appearance. You can also use buttons for visual effects such as showing and hiding content in a document. For example, you may have a street map, and when the user moves the pointer over certain areas on the map an image of a landmark pops up, as in the example in this tip. When the pointer is moved away from the button area, the image disappears. It isn't magicit's interesting programming using a push-button process.
Rollover Image Tips
Using buttons in the way described in this tip can greatly enhance a visual document. Keep these things in mind: When you are building several buttons, complete one pair and then use the Create Multiple Copies method described in Tip 102 to quickly build the remaining pairs. You then can customize each pair as required. Changing the size of the image button changes the size of the image. In the first example, the image used as a rollover is small; the one used in the second example is much larger since the button is sized much larger.
|
Here's how you do it:
1. | Select the Button tool in the Advanced Editing toolbar and drag a marquee over the area where you want the image to be responsive to a user's pointer movement. Release the mouse when you have drawn the marquee and the Button Properties dialog opens. | 2. | Click the Appearance tab and set the fill and stroke to none. | 3. | Click the Options tab, and then click the Layout pull-down arrow and choose Icon Only from the list. | 4. | Click the Behavior pull-down arrow and choose Push as the button type. The three states for the push button appear in the State list on the dialog; select Rollover (Figure 103a).
Figure 103a. Choose a push button type and select an image to use as the button's icon.
| 5. | Click Choose Icon, and then click Browse in the Select Icon dialog. When the File of Type dialog opens, locate and select the file you want to use for the effect, and then click OK to close the Preview Icon dialog and return to the Button Properties dialog. In my example, I have an image of St. Louis Cathedral in New Orleans.
The Name of The Game
If you are using a large number of buttons, be sure to use a naming system that is logical for you. For example, if you are building six pop-ups, you can name the buttons button1 through button6 for the pop-ups, and image1 through image6 for the image buttons. |
| 6. | Click Close to close the Button Properties dialog. | 7. | Click the Hand tool on the Basic toolbar and move the pointer over the button's area. You see the image displayed over the map (Figure 103b).
Figure 103b. Test the button. Move the pointer over the button area to display the image; move the pointer away from the button area to hide the image.
|
Let's take it one step further. Suppose you want the image to appear in a different location on the page, and at a different size than the original map. No problem. You need two buttons, and actions attached to one button you use as a "hotspot" to make it happen:
1. | Create a button as described in the previous steps but place the button on the page location where you want it to pop upfor example, the upper right of the map. In this example, my button that contains the image is called image. That's hard to forget! | 2. | Now add a second button over the area that you want to react to the user's mouse. In the Button Properties dialog, make sure the background and stroke are clear in the Appearance tab. | 3. | Click the Actions tab. You add two actions to make this effect work: - First, click the Select Trigger pull-down arrow and choose Mouse Enter, and then click the Select Action pull-down arrow and choose Show/Hide Field. Click Add and the Show/Hide Field dialog shown in Figure 103c appears. Click the image field in the list (see how useful naming a field can be?) and then click the Show radio button. Click OK to close the dialog and return to the Button Properties dialog.
Figure 103c. Choose the button containing the image and specify whether to show or hide the field
- Repeat the process again, this time choosing the Mouse Exit trigger, and in the Show/Hide Field dialog, select the image field again and click Hide. Click OK to close the Show/Hide Field dialog, and click Close to dismiss the Button Properties dialog.
| 4. | Click the Hand tool on the Basic toolbar and move the pointer over the "hotspot" button to show the content of the second button (Figure 103d).
Figure 103d. Move the pointer over the hotspot to display the image button.
|
|