Book III 7 in Java

Drawing Code 3/9 in Java Book III 7

In Book III, 5, we discuss how to use frames in conjunction with text and drawing tools to make the images (one per frame for each button) for a simple button rollover If you plan to use Dreamweaver to generate the rollover code, that chapter provides all the information that you need

Figure 7-3: The Circle Hotspot tool covers the bowling ball; the Polygon Hotspot tool works best for the pin

If you want to export the rollover code for a two-state button (normal and rollover/highlight) from Fireworks, you need to add a behavior to the slice by taking these steps: 1 Right-click the slice for which you want to create rollover code, or select the slice and click the behavior handle (the round icon) in the center of the selected slice A contextual menu appears 2 Choose Add Simple Rollover You can also add rollover behavior to a button by using the Behavior panel: 1 If the Behavior panel is not currently open, choose Window Behaviors or use the keyboard shortcut Shift+F3 2 Click the Add Behavior (+) button at the top left of the Behaviors panel A menu appears 3 Choose Simple Rollover from the menu You have set up a behavior that swaps the image in Frame 1 with the image in Frame 2 when a user rolls a cursor over the button on your Web page The

behavior also swaps the image back when the user moves the cursor off the button If you want to check out your rollover in action without building your Web page, click the Preview button at the top of the canvas and move your cursor over the slice Your button can have up to four states Fireworks uses the image in Frame 1 for the normal, default state; Frame 2 for the Rollover state; Frame 3 for the Down state; and Frame 4 for the Over While Down state If you want to include a down state for your button, and you have a third frame in your PNG with the image for an additional button state, follow the preceding steps to add a rollover state, and then do the following: 1 Click the Add Behavior button at the top left of the Behaviors panel A menu appears 2 Choose Set Nav Bar Image from the menu The Set Nav Bar Image dialog box appears 3 Click OK Now, when a user clicks the button in your exported HTML, the button changes from the rollover state to the down state Figure 7-4 shows what the Behaviors panel looks like after you add the Simple Rollover and Set Nav Bar Image behaviors You can use the add behavior (+) button to add a behavior and use the remove behavior ( ) button to remove a behavior from a slice

If the three-state button is linking to another page, adding a down state doesn t give you much bang for your buck because the linked page may appear in the browser window before the user even has a chance to notice that the button changed

You may want to include an over-while-down state for your button (sort of an extra rollover) if you re using the down state of the button to indicate the current page If so, check in the Frames panel to make sure you have a fourth frame with the image for an extra button state, add the Rollover and Set Nav Bar Image behaviors by using the steps that you can find earlier in this section, and then do the following steps: 1 Double-click the Set Nav Bar Image line in the Behaviors panel The Set Nav Bar Image dialog box appears 2 Select the Include Over While Down State (Frame 4) check box If the button is for the current page, select the Show Down Image upon Load check box, as well 3 Click OK Select the Export Multiple Nav Bar HTML Files check box on the Document Specific tab of the HTML Setup dialog box if you want Fireworks to generate separate HTML files for each button in the nav bar (see the Setting the export HTML file options section, earlier in this chapter, for more information)