Inserting an Interactive Button

If plain-text hyperlinks don't excite you, interactive buttons might. An interactive button is an animated button that, when clicked, activates a hyperlink, as shown in Figure 4-8. This type of button is a good way to add oomph to your links. When the visitor moves the cursor over the button before clicking it, the button changes color or shape. You can arrange interactive buttons on a horizontal line or stack them vertically to create an interactive button- navigation bar.

Figure 4-8: An interactive button.

By default, interactive buttons look like stylized rectangular boxes. If rectangles aren't your style, Expression Web gives you a bevy of button shapes to choose from, including capsules and tabs in several styles and colors.

REMEMBER 

Interactive buttons are produced by using JavaScript and therefore require that your visitors use JavaScript-capable browsers.

Adding an interactive button to your page

To create an interactive button, follow these steps:

1. Choose Insert Interactive Button.

   The Interactive Buttons dialog box appears with the Button tab visible, as shown in Figure 4-9.

   
   Figure 4-9: The Button tab in the Interactive Buttons dialog box.

2. In the Buttons list box, click the type of button you want to create.

   Chances are that the cryptic list items don't necessarily make sense to you, so scroll down the list box and click an option that looks promising. A preview of the interactive button appears in the dialog box's Preview area.

3. In the Text text box, type the word or words that you want to appear on the button.

4. In the Link text box, type the filename or URL of the page you want to appear when the interactive button is clicked.

   Or click the Browse button to choose a link destination from the Edit Hyperlink dialog box. We describe how this dialog box works earlier in this chapter, in the section "Editing Hyperlinks."

5. If you're happy with what you see, click OK to close the dialog box and insert the interactive button in your Web page.

   If you want to further tinker with the interactive button's text formatting and image style, don't click OK-read the next section of this chapter for more directions.

Changing an interactive button's text formatting

You're not stuck with the text formatting that Expression Web provides when you create an interactive button. You can change text size, color, and more. Here's how:

1. Insert an interactive button into your page. (Follow the steps in the preceding section.) Or, to change the text formatting on an existing button, in the page, double-click the interactive button to display the Interactive Buttons dialog box.

2. In the dialog box, click the Font tab to make those options visible, as shown in Figure 4-10.

   
   Figure 4-10: The Font tab in the Interactive Buttons dialog box.

3. Choose a font, font style, and text size from the appropriate list boxes.

   For detailed information about each font effect, see Chapter 3.

4. Choose text colors from the Original Font Color, Hovered Font Color, and Pressed Font Color list boxes:

   • Original Font Color: When nothing is happening to the interactive button (the visitor isn't clicking it or moving the mouse over it), text appears in this color.

   • Hovered Font Color: When a visitor moves the cursor over the button without clicking it, text appears in this color.

   • Pressed Font Color: When a visitor clicks the interactive button, text appears in this color while the button is being clicked. When the click is finished (about a half-second later), text returns to its hovered color.

5. To change how the text is aligned on the button, choose different options from the Horizontal Alignment and Vertical Alignment list boxes.

   We don't waste your time describing each effect here. Just pick the effect that looks like what you want. After you finish creating the button, you can preview the page to see how the effect looks. If you don't like the effect, you can change this setting.

6. When you're happy with what you see in the Preview area, click OK to close the dialog box and insert the interactive button in your Web page.

   If you want to keep fiddling, don't click OK-read the next section of this chapter for more directions.

Altering an interactive button's image

You have a little wiggle room with the interactive button images that Expression Web gives you. You can change the image dimensions, as well as how they behave when clicked, by following these steps:

1. Insert an interactive button into your page. (Follow the steps in the earlier section "Adding an interactive button to your page.") Or, to change how an existing button looks, in the page, double-click the interactive button to display the Interactive Buttons dialog box.

2. In the dialog box, click the Image tab to make those options visible, as shown in Figure 4-11.

   
   Figure 4-11: The Image tab in the Interactive Buttons dialog box.

3. To change the button's dimensions, enter new pixel values in the Width and Height text boxes.

   Be sure that the Maintain Proportions check box is selected so that the button image doesn't stretch in a funny way when you change its width or height.

4. If you want the button to look the same whether or not the visitor hovers the cursor over it, deselect the Create Hover Image check box.

5. If you want the button to look the same while the visitor clicks the button, deselect the Create Pressed Image check box.

6. Make sure that the Preload Button Images check box is selected.

   TECHNICAL STUFF 

   When this check box is selected, Expression Web inserts JavaScript into the page's HTML code that tells the visitor's browser to load the button's images in the background while the rest of the page text loads. (The regular, hover, and pressed images are three separate picture files.) This way, when a visitor hovers the cursor over or clicks the interactive button, the images that create these effects are immediately available. Incidentally, browsers that don't understand JavaScript simply ignore the script and display only the original button image.

7. If necessary, choose the interactive button's background color.

   By default, the interactive button's background color is white. You can see the interactive button's background color only if you chose a rounded button-a capsule or a rounded tab-and if the page's background color is something other than white. If this is the case, you can either set the interactive button's background color to be the same as the page's (choose a color from the Make the Button a JPEG Image list box), or you can give the button a transparent background color (select the Make the Button a GIF Image option).

8. Click OK to close the dialog box and insert the interactive button in your Web page.

Tip 

If your site needs more than a handful of interactive buttons, consider using a third-party software option that can create multilevel navigation. Before you decide on one, make sure it plays by the rules, by complying with Web standards for code and accessibility. A good one is Ultimate Drop Down Menu, by Brothercake (http://www.brothercake.com/site/products/menu).