Bringing Interactivity to Your Pages with Behaviors in Java

Generate Code 39 Extended in Java Bringing Interactivity to Your Pages with Behaviors

Fireworks can generate JavaScript that does more than merely change the state of a button For instance, you can set a behavior that swaps one image for another image elsewhere on the page when you roll over a button or hotspot You can also use Fireworks to generate pop-up menus, which you can export as either JavaScript or CSS code

A button rollover is an image swap you exchange the image for one button state with the image for another state But you can roll over a button and have a different image on the page swap For example, you can set up a rollover behavior for two or more buttons to show different color choices for a product, so that when the user rolls over a button for color choices, the image of the product changes to show the appropriately colored version If you want the image swap and page download to happen pretty quickly, limit the number of images that you want to swap and limit the file size of each swapped image To add the Swap Image behavior to a trigger slice and target slice, create the frames, images, and slices (see Book III, 3 to learn how to create images, Book III, 5 for information on frames, and Book III, 6 for information on slices), and then follow these steps:

1 Click the slice that you want to use to trigger the image swap You can click the slice either on the canvas or in the Layers panel

2 Click the Add Behavior (+) button at the top left of the Behaviors panel (if the Behaviors panel isn t visible, press Shift+F3 on your keyboard) A menu appears 3 Choose Swap Image The Swap Image dialog box, which you can see in Figure 7-5, appears

4 Select the targeted slice by clicking its name (in the box on the left) or by clicking its representation (in the box on the right) When you click in either box, both boxes update to show your selection 5 Using the Frame No drop-down list, select the frame number that you want the rollover to trigger The drop-down list shows all the frames in your PNG file You can also select the Image File radio button and navigate to an existing image file outside your PNG to swap in But for the rollover to work correctly in all browsers, the default target image and swapped target image have to be the same height and width 6 Leave the Preload Images and the Restore Image onMouseOut check boxes selected Preloading the swapped image ensures the user doesn t experience a delay when he or she rolls over the button that triggers the swap You make a trade-off with preloading because the Web page takes longer to load initially

Restoring the image to default prevents the swapped image from sticking If you want the swapped image to remain in place until the user rolls over another button, deselect the Restore Image onMouseOut check box 7 Click OK A line on the canvas from the center of the trigger slice to the target slice shows that one slice triggers a behavior in the other, as you can see in Figure 7-6

You can have multiple buttons trigger a rollover in the same slice, and you can have a single button trigger rollovers in multiple slices Of course, the more big rollovers you have on the page, the longer the page takes to load On the other hand, rollovers give useful feedback (and instant gratification) to the user, and Fireworks makes producing them a snap