JavaScript buttons

Fireworks makes it easy to create interactive buttons without writing a line of JavaScript code. With the advent of the Button Editor in Fireworks 3, users have a feature that makes button creation quick and easy. However, there is a great deal of misinformation in the official tutorials. Follow these rules to get the most out of this new feature.

There are several ways to create a button:

Creating Roll Over Buttons from Scratch:

1. If you want to create the graphics for the button from scratch, choose Insert > New Button and create the images and effects associated with the roll-over effects and supply the desired hypertext links using the Fireworks button editor. With the Button editor, you create the gaphics you want for each state of the button. Begin by drawing the outline of the button in the button editor, using the normal drawing tools. After creating the basic button shape, add text for the button's label.

Select the Text tool and click near the center of the rectangle in the Button Editor.

Choose a font from the font pop-up menu in the Text Editor dialog box, enter a point size, select a color from the color pop-up menu, and click the center alignment button (we used Arial, 14 point, boldface, center aligned). Type our story in the large text box at the bottom of the dialog box and click OK. Now you'll use the Align commands to center the text within the rectangle.

With the Pointer tool, select the rectangle and then hold down Shift and click (Shift-click) the text. You can manually drag the label to its best position. Alternatively, you can have Fireworks align the text and the button shape. With the Pointer tool, select the rectangle and then hold down Shift and click (Shift-click) the text. Choose Modify > Align > Center Vertical and then choose Modify > Align > Center Horizontal. (Don;t be surprised if these two commends are reversed like they are on my system.) Fireworks moved the text to align it within the rectangle and didn't move the rectangle. The Align commands maintain the position of the first selected object, to which they align subsequently selected objects. Finishing touches can be put on the graphic, and Fireworks has a number of useful effects that can be applied to make the button appear more three dimensional. (My favorites involve using the Stroke and Effect toolbars

Once the Normal view of the button is satisfactory, Click the Over tab in the Button Editor, and click Copy Up Graphic button. This copies and pastes the Up state of the button image to serve as the point of reference for modifications you will make here to the Over state. The image you create in the Over tab window is the way the button will appear when the pointer passes over the button on the completed Web page. You will want to make this image distinct from the Up state by changing the Fill color, or applying one of Fireworks effects to the existing image.

Use the pointer tool to select the button. Click the fill color well in the Toolbox, select the dropper, and click the tan rectangle behind the welcome message. The dropper lets you sample any color on the screen or the standard web-safe color swatch.

Click on the Down tab, and repeat the process of creating an image to visually indicate that the button when the button has been clicked. I'ld recommend completing the Up, Over, and Down images with considerable care;don't worry about the tab labeled "Over While Down" - just copy the Down image so the button won't disappear. Finally, we have to link the new button to an Internet address.

Click the Active Area tab, in the Button Editor, and then click Link Wizard in the lower right corner. Click the Link tab. Enter a URL in the text box at the top of the dialog box. Use a valid URL so that you can test the button in a browser. Click OK, and close the Button Editor.

Once the button is created and sotred in the Library, Fireworks makes it easy to create a number of cimilar buttons that look alike, but have different labels and Internet links. Use ALT (Windows) or Option (Macintosh) and drag the instance of the button just created to move a copy of the button instance. If the Object inspector is not visible, choose WINDOW > OBJECT.

In the Button Text box, type the label for this second button and press ENTER (Windows) or Return (Macintosh). A Message box will appear asking if you want to edit the active instance of the button or all instances of thebutton. In a case like this, you want to have two distinct instances of the button, so you'll choose to edit the current button. Click Current. Then click the Link Wizard button in the Object inspector, enter a different valid URL and click O.K. and verify that the new button's label has been updated.

There are two ways to preview your handiwork. To inspect the visuals only click on the Preview Tab at the top of the canvas on which you were working. To check the final effects in a browser window complete with hypertext link, click on File > Preview in Browser.

2. Now that you've learned the "old-fashined" way, the easiest way top create interactive buttons involves using Macromedia's library of interactive buttons.
   
3. If you wish to create an interactive button, and have already created the two states of the button image with Fireworks or some other graphics editor, Dreamweaver itself can be used to create a two state rollover button.
   
   
   Select:

Insert > Rollover Image

and supply the location of the Original Image, as well as the Rollover Image, and the URL of the page that will load when the button is clicked.