Interactive Buttons are one of several features in Expression Web that were carried over from FrontPage 2003. Interactive Buttons (see Figure 22.1) are a convenient way to add graphical navigation links that provide interactivity and are easily editable as your site changes over time.
Interactive Buttons use a series of images and some JavaScript to swap out images as you interact with a button by hovering over it or clicking on it. Because Interactive Buttons use standardized Dynamic HTML code, they will work on all modern browsers, assuming JavaScript is enabled.
Note
Because of the many security threats that exist on the Internet, some people disable scripting in the browser in an attempt to add a degree of protection from rogue scripts. While doing so isn’t advised and provides minimal protection at best, you must still consider such possibilities when designing your Web site.
Interactive Buttons will not swap images if scripting is disabled, but buttons will still appear and the links associated with buttons will still work.
One of the first things you’re likely to notice about Interactive Buttons is that there are a lot of choices in button style. As shown in Figure 22.2, there is a large list from which to choose, including 31 different categories and well over 100 different styles.
To insert an Interactive Button, select Insert, Interactive Button. The Interactive Button dialog (shown in Figure 22.2) consists of three tabs: the Button tab, the Font tab, and the Image tab.
The Button tab (shown in Figure 22.2) allows you to select a button style and configure basic properties of the button. You can specify the text that appears on the button as well as the URL to which the button should link. If you enter a lot of text for the button, the text may exceed the width of the button. In such cases, you can either change the font size using the Font tab or modify the size of the button itself using the Image tab.
Tip
The text you enter for an Interactive Button is actually embedded into the images that will make up the button when you save your page. If you want to edit the text, you’ll need to do it using the Interactive Buttons dialog in Expression Web.
To get a good idea of how your button will appear on the page, Expression Web provides you with a Preview window. Hover over a button in the Preview window to see the interaction. By clicking on a button, you can see how the button will change its appearance when clicked.
The Font tab (shown in Figure 22.3) provides configuration settings for the font that appears on an Interactive Button. In addition to the font, you can also choose font style (default, italic, bold, or both bold and italic) and font size.
Font colors can also be configured on the Font tab, as shown in Figure 22.4. You can configure the colors for three different button states:
Original state—. The state of the button when the mouse is not hovering on it and when it is not being clicked.
Hovered state—. The state of the button when the mouse pointer is being hovered over it.
Pressed state—. The state of the button when the button is being clicked.
To configure the alignment of a button’s text, select the desired alignment (left, center, or right) from the alignment dropdowns. You can configure both the horizontal and vertical alignment of the text.
The Image tab (shown in Figure 22.5) provides settings for controlling the size and format of the images that make up an Interactive Button.
To control the width and height of an image, enter a pixel value in the Width and Height textboxes. Arrow buttons are provided for precise size adjustments. When the Maintain Proportions checkbox is checked, a change in height will cause a proportionate change in width, and vice versa. Removing the check from the Maintain Proportions checkbox allows you to make uniquely shaped buttons, as shown in Figure 22.6.
By default, Expression Web creates images to be displayed when an Interactive Button is hovered over and when it is clicked. The Create Hover Image checkbox allows you to choose whether or not Expression Web will create the hover image. If the checkbox is unchecked, the Interactive Button will not change when it is hovered over. Similarly, the Create Pressed Image checkbox controls whether or not an image will be created for the pressed state of an Interactive Button.
Note
If you see a broken image in your browser when browsing to a page with Interactive Buttons, see “Interactive Button Images Broken” in the “Troubleshooting” section of this chapter.
When the Preload Button Images checkbox is checked, Expression Web will add a script to the page to preload the images that make up the Interactive Button. By preloading images, users of your Web site will not have to wait for the images to load when they hover over or click a button. When images are not preloaded, users will experience a delay before the new image is displayed. Therefore, it is recommended that you leave this checkbox checked.
The Image tab contains options for the types of images Expression Web will use to build your interactive button. You can choose between JPEG images and GIF images.
→ | For information on choosing between different image formats, see “Using Graphics and Multimedia”, p. 241 (Chapter 14). |
When the Make the Button a JPEG Image and Use This Background Color radio button is selected, Expression Web will save your images in the JPEG format and use the background color you specify. Choosing the Make the Button a GIF Image and Use a Transparent Background radio button will cause Expression Web to save your images in the GIF format and use a transparent background. However, as shown in Figure 22.7, the GIF option can cause jagged edges on buttons with rounded corners, so use it carefully.
Because Expression Web builds Interactive Buttons using image files, when you save a page on which an Interactive Button has been inserted, you will be prompted to save the images, as shown in Figure 22.8.
→ | For more information on the Save Embedded Files dialog, see “Using Graphics and Multimedia”, p. 241 (Chapter 14). |
Tip
To move the images created by an Interactive Button after you’ve added the button, simply drag and drop the image files into the desired folder from within the folder list. Expression Web will automatically update the links so that the Interactive Button will still work correctly.
It may seem as though there is a connection between image files and an Interactive Button, but there isn’t. Therefore, if you remove an Interactive Button from a page, you will want to manually delete the image files from your Web site so they don’t take up unnecessary disk space.
Editing an Interactive Button is easily accomplished by double-clicking on the Interactive Button in Design View. The Interactive Button dialog is displayed and you can edit all the properties of the button.
Tip
You can also edit an Interactive Button by right-clicking on the button and selecting Button Properties from the menu that appears.
When you edit an Interactive Button, Expression Web will always prompt you to resave the images that make up the button even if the change you have made does not affect the images. In fact, if you open the Interactive Button dialog and click OK without making any changes at all, Expression Web will still prompt you to resave the images. In all cases, allowing Expression Web to resave and overwrite the existing images will cause no problems.
Note
If Expression Web seems to be saving multiple copies of images for a single Interactive Button, see “Multiple Image Copies Saved for an Interactive Button” in the “Troubleshooting” section of this chapter.
I am previewing my page with Interactive Buttons and one of my buttons shows a broken image link when I hover over it or click it. I recently cleaned up some unused files, but I’m not sure if that caused it.
Chances are you removed one or more of the image files the Interactive Button requires. Fortunately, fixing this problem is simple. Open the page in Expression Web and double-click on the Interactive Button. Then simply click OK without making any changes. When you save the page, Expression Web will resave the images for the Interactive Button and your problem will be fixed.
I just noticed that I have multiple copies of images for my Interactive Button. Isn’t this wasting disk space?
By default, Expression Web saves Interactive Button images in the root folder of your Web site. If you change that and save them in a subfolder, the Interactive Button will still work fine. However, if you then take some action that resets Expression Web’s folder setting (such as flip-flopping the image format), Expression Web will lose track of the images saved in a different folder and will resave new images in the root folder of the Web site.
You can also cause multiple copies to be created if you change from JPEG to GIF or GIF to JPEG without flip-flopping. Expression Web doesn’t delete the original image files when you switch image formats, so you’ll want to do it manually.
If you’re not sure which image files to remove, remove them all and then double-click on the Interactive Button. Next, click OK in the Interactive Button dialog and save the page. Expression Web will automatically save all the images for the Interactive Button and you’ll be fine.
I began this chapter by saying that Interactive Buttons don’t fit the bill as a site-wide navigation tool. I stand by that statement, but that doesn’t mean there aren’t some practical reasons for using Interactive Buttons.
Many of the examples in this chapter showed an Interactive Button being used as a Download Now button. Everyone who uses the Web downloads software from time to time, and there’s nothing more frustrating than searching a page for a link to download a file you need. An Interactive Button is the perfect choice because it stands out and is easily created.
Another great use of Interactive Buttons is for the creation of tabbed navigation within a page, as shown in Figure 22.9. This type of interface is easily created using tables and Interactive Buttons.
In short, anytime you need a few buttons on your Web site, Interactive Buttons are a great choice. Be creative with Interactive Buttons, but don’t burden yourself by using them for site-wide navigation. If you do, you’ll find yourself struggling to manage the images that are created and your navigation won’t look as professional as it should. A much better choice for this task is a DHTML menu system such as DHTML Menu Builder. (A full version of DHTML Menu Builder is included free of charge on the CD that accompanies this book.)