It very simple to create rollover buttons in fireworks. Here we provide tutorial to make rollover buttons in both Dreamweaver and Fireworks. Let's start with Dreamweaver.

Rollover Buttons in Dreamweaver

1. For this first you should use Fireworks to design rollovers. Then export   button as well as the rollover to your site folder.

2. Open the html file in Dreamweaver. Use Insert>Rollover Image tab to insert the image as well as the rollover image from your folder in the html file. Name the image and choose a link. Click on OK.

Preview the file in your browser and you will see that you've successfully created a rollover button in Dreamweaver.

Rollover Buttons in Fireworks

IBehavior palette is used in Fireworks you to create rollover buttons

1. First design your images and rollovers in Fireworks. Put your images and your rollovers in different layers.

 

2. Select different frame and in one frame you should have the actual images and in other frame you should have the rollover images.

 

3. Use (Insert>Slice) to insert a slice and give an appropriate name for easy reference.

 

4. Click on the slice and go to Window>Behaviors.

 

5. To choose Simple Rollover  click on the '+' button  and then click on OK

 

 

Repeat the process for each of the slices.

 

6.Repeat the process for each of the slices.

 

 

7. Finally export the file and the Fireworks will automatically convert the rollovers to javascript and html. The programming part will be done by the fireworks itself. you should remember two things when you export the file;

(a) Use slice objects’ for slicing.

(b) For  HTML style choose Dreamweaver 2.0

 

 

You can preview your rollover image by browsing the .htm file and open in internet explorer and you'll see your swap images working beautifully.

 

I am sure that you enjoyed this tutorial.