Placing a Rollever Button on a Page

Create the Button:

Create a button in fireworks by clicking on a shape and drawing it out. The example below is a rectangle shape filled with the leaves pattern and an oil stroke size 7:

Rename this layer Button. Add some text by clicking on the text tool and type in the text you want to appear as my home text shown below:

Convert the Button to a Symbol:

Select both the button and text in the layer pallet by clicking the arrow tool and then clicking on the shape and text while holding down the shift key. Your button should look like the image below:

Click Insert>Convert to Symbol.

In the "Symbol Properties" window give your button a name (MyButton) and ensure that the "Button" radio button is checked.

Hit OK to close the symbol properties dialog box. Your button should look like the one below:

Create a Roll Over Image:

You are now going to create a "Roll Over" image for the button. Make sure you are viewing your button in "Original" mode as opposed to "Preview" and "Double Click" on the button. This action will open a button editing window as shown below.

Hit the "Over" tab and you will be presented with a blank window. Click on the "Copy Up Graphic" button to recreate your blank button image in the "Over" window.

This is where you now will change the look of the button in some way. I changed the stroke and text color as shown below:

To save the change simply close the button editing window by clicking on the X in the right top corner.

Go back to the "Original" view window. The text has reappeared on your button. Check the button out in "Preview" mode and you will see that the "Roll Over" effect kicks in when you pass the mouse over it.

Click back on the "Original" view tab to add behaviors to your button.

Assigning Additional Behaviors:

Make sure the behavior toolbar is open (Window>Behaviors). You have already applied one behavior, a simple rollover. It is listed in your behavior palette shown below:

Add additional behaviors by clicking the + button and selecting any other behavior you want to assign to the button.

Click F12 to see how your button looks on the web.

Define a Link:

You will now need to define your link and alternate text in your object toolbar.

Before you can assign a link to the button, you will need to insert a hotspot, click on the button to select it then click Insert>Hotspot. Your button should now look like the one below.

If you don't see the objects toolbar on your canvas, select window on your standard toolbar, then choose object from the drop down list.

Open the page you want to copy the URL address from by clicking in the location box, choose copy, the return to fireworks and click in the object toolbar, with the object tab selected, then click on the drop down box that displays a chain link and paste the location in this box.

On the alternate <alt> text button type some text.

Trim the Canvas:

Getting rid of extra space is no problem in Fireworks. Simply Select Modify>Trim Canvas. Save your button, then press F12 to view your button in a browser. Click on the button to see if it will take you to Your Company home page.

Save as Gif, Png, and HTML:

Now you will place the button on the webpage. First you will save your button as a png file by clicking within Fireworks and clicking file>save. Saving as a png will allow you to change your button later. If you only save it as a gif, you will now be able to edit it later.

To save your file in html and gif format, choose File, then export. Save as a gif and html file by clicking in the Save as Type dialog box and select both .

Copy the JavaScript to Your Notepad:

Because you have assigned behaviors to your button, you will have to copy a JavaScript into you document. One JavaScript will be typed in your section and the second JavaScript will be put in your between your tags just above the end of body tag. By saving your file in html format, you can open the JavaScript in Wordpad or Notepad. The script will tell you where to copy and paste. To align your button to the center, in the image JavaScript, the one copied above the end of body tag, put it in a between paragraph tags with the command align=center. Save you document and view it in a browser. Check to see if your button works.