| One of the most common tasks in any web development endeavor is to create a menu that features rollover buttons. In Chapter 3, "Building a Web Page," we used pre-built rollover images available from the Images, Image Objects, Rollover Image command. In Chapter 10, "Using Dreamweaver Behaviors," we looked at the Swap Image and Swap Image Restore behaviors as alternatives for incorporating rollover images in your web pages. What we didn't do however, is examine exactly how those rollover images were created. Using Fireworks, in conjunction with Dreamweaver, we'll do that now. To create a rollover image using Fireworks, follow these steps: 1. | Open Fireworks. Create a new document by choosing File, New (or by pressing Ctrl+F4 in Windows or Command+F4 on a Mac). This launches the New Document dialog box. Specify a width of 150 pixels, a height of 25 pixels, a resolution of 72 pixels/inch (the default for web images), and click OK.
| 2. | In the new document, choose the Rectangle Vector tool, a fill color, and a stroke color. Draw a box on the document.
| 3. | With the rectangle selected, press F8 on your keyboard to bring up the Symbol Properties Inspector. In the Name text box, type a unique name for your new symbol and choose the Button Type similar to Figure 19.12.
Figure 19.12. Give your new symbol a name and change the Type option to Button. 
| 4. | Use the Text tool to add some text to your graphic. I'll add the text Click Me.
| 5. | Select the Pointer tool from the toolbox and double-click the symbol to enter into Button Symbol Editing mode, similar to Figure 19.13.
Figure 19.13. Double-click the new symbol to enter into Button Symbol Editing mode. 
| 6. | Click the Over tab near the top of the workspace to edit the Over state of the button. Clicking the Copy Up Graphic button near the bottom-right corner of the workspace allows you to carry over any attributes, including the graphic as a whole, from the Up state.
| 7. | After you click the Copy Up button, the Up state is copied to the Over state. Notice that all the tools are still available to you. Highlight the selection and choose a different fill color from the toolbox. This is the color the button will change to when the user hovers the mouse over the button.
| 8. | Click the Down tab. In the Down state, click the Copy Over Graphic button. The Down state now has the same attributes as the Over state. Select the symbol and change the color once again. This is how the button will appear when the end user clicks the button.
| 9. | Click the Active Area tab. This is the same concept as a hot spot in an imagemap. The active area defines what area activates the button. For best results, make sure that the active area covers the entire graphic. Click Done when you're finished making all changes.
| 10. | Click the Preview tab at the top of the document to see how your button will behave in a browser.
|
Now that you have a button made, you're ready to export it out of Fireworks. For a rollover graphic to work, JavaScript is written to a new HTML page. Our goal is to take the HTML page and the resulting button images that Fireworks creates and import them into Dreamweaver. To do this, follow these steps: 1. | In Fireworks, select the Export option from the File menu. The Export dialog opens.
| 2. | Browse to the root folder in the defined site.
| 3. | Give the new HTML file a name such as rollover.htm.
| 4. | Select the HTML and Images option from the Save As Type menu.
| 5. | Enable the Put Images in a Subfolder check box and browse to find the Images folder in the local root folder of the site you are working with in Dreamweaver.
| 6. | Click Save.
| 7. | Return to Dreamweaver and open the rollover.htm file. Switching to Code view reveals the JavaScript code that Fireworks created (see Figure 19.14). The browser reads this code and displays the appropriate images to the user depending on user/mouse rollover states.
Figure 19.14. Fireworks-created JavaScript is written to the new file. 
|
When you get over the initial awe of this streamlined functionality, you'll begin to wonder how to use the rollover imageincluding the JavaScript codein the context of your web design. This is discussed in the next section. |
