Swapping Images to Make Interactive Buttons

Designers often use a behavior called Swap Image to create dynamic graphical buttons, similar to the buttons Expression Web generates for interactive buttons (described earlier in this chapter). To do so, you need to have access to two image files. For the effect to look its best, the images should look similar, such as two button-shaped graphics that differ only in color or shading.

The Swap Images behavior use Dynamic HTML to make it work. (See the sidebar "What's Dynamic HTML?" in this section for more information.)

The first image sits in the page, and looks to all the world like a regular ol' button graphic. With the help of DHTML, the second image replaces the first based on the event you choose (most often, onmouseover).

The following steps describe how to create your own interactive button:

1. Add the two graphical files into your Web site.

   If you're not sure how to add files, refer to Chapter 1.

2. Insert the first image into the page.

3. Click the image, and then choose Format Behaviors.

   The Behaviors task pane appears.

4. In the task pane, click the Insert box, and from the menu that appears, choose Swap Image.

   The Swap Images dialog box appears. The main portion of the dialog box already contains the location of the selected graphic. You now must tell Expression Web which graphic you want to swap.

   If a warning about ActiveX content pops up, click Yes to continue adding the behavior and read the sidebar "What's Dynamic HTML?" later in this chapter.

5. In the Swap Image URL text box, type the URL or location of the second image.

   Or click the Browse button to select the image from a list of files.

6. Be sure the Preload Images and Restore On Mouseout Event check boxes are selected.

   Preloading images for this effect ensures that they're immediately visible when the page loads-a key element of this illusion's success.

   By selecting the Restore On Mouseout Event check box, you tell Expression Web to insert DHTML that causes the original image to reappear when the visitor moves the cursor off the image, thereby completing the swap.

7. Click OK to close the Swap Images dialog box.

   The dialog box closes, and the Swap Images behavior appears in the Behaviors task pane. (If you don't see Swap Images, be sure the image in the page is still selected.)

8. To turn your button into a hyperlink, in Design view, select the image and click the Insert Hyperlink button to hook it to the desired hyper-link destination, as described in the first part of this chapter.

Save and preview the page to watch the Swap Image and Swap Image Restore effects do their things correctly. (Be sure to preview by using several browsers to see how the effect looks.) To change either effect, double-click their listings in the Behaviors task pane.

What's Dynamic HTML?

Dynamic HTML (or DHTML) isn't a "flavor" of HTML per se. It's a combination of different technologies, including HTML, JavaScript, Cascading Style Sheets, and other techie goodies that work together to create interesting effects. Expression Web calls these effects behaviors.

As you can imagine, coding DHTML takes some geeky mojo. But Expression Web comes with tools that do all the work for you. You find the Expression Web DHTML tools in the Behaviors task pane. (If you don't see this pane, choose Task Panes Behaviors.)

Really getting to know DHTML (and, by extension, understanding the Expression Web DHTML features) requires knowing HTML, CSS, and JavaScript. If this description fits you and you want to find out more, visit an excellent DHTML tutorial at http://www.webmonkey.com/webmonkey/authoring/dynamic_html/tutorials/tutorial1.html.

Be aware that if you add DHTML elements to your Web page, Expression Web inserts scripts in your Web page's code. Many Web visitors have their browsers set to block or at least issue a warning if a page contains scripts. In fact your own computer's security settings may prompt a warning even when you add behaviors to your Web page. We recommend you preview your pages in browsers with script blocking turned on so that you can see your pages as your visitors will see them. We also suggest that you use DHTML as embellishments to your already useable page rather than as, say, the only way to navigate to a particular page.

Tip 

In this section, we show you how to use the Swap Image behavior to create an interactive hyperlink button, but you can, of course, use the behavior however you like. For example, you can create a clickable before-and-after picture display in your Web site by using two photos that illustrate "before" and "after" and then attaching the Swap Image behavior to the onclick event. The possibilities are endless!