Learn how to create rollover buttons in Dreamweaver and Fireworks

Macromedia Fireworks and Dreamweaver both has made very easy to create rollover buttons. In this tutorial you can learn how to give rollover buttons in both Normally use Dreamweaver to insert rollovers.

Rollover Buttons in Dreamweaver

1. Design the rollovers in Fireworks. You have to design the button and the rollover then export it to the site folder.
2. Open the html file in Dreamweaver. Click on Insert>Rollover Image and browse the button image and the rollover image from the folder. Name the image and choose a link. Click on OK.

Preview the file in your browser to check out the rollover effect.

Rollover Buttons in Fireworks

In Fireworks you have to use the Behavior palette to create rollover buttons.

1. Design the images and rollovers in Fireworks. Make sure the rollovers are in the exact same positions as your rollovers. Put the images in one layer and the rollovers in another layer.
2. Then you need 2 frames. The actual images in Frame 1 and frame 2 should have the rollover images.
3. Insert slices on each of the images (Insert>Slice) and name it.
4. Click on the slice and go to Window>Behaviors.
5. Then click on the '+' button and choose Simple Rollover.
6. Click on OK
7. Repeat the behavior steps for each slices.
8. Then you have to export the file. Fireworks will automatically convert the rollovers to javascript and html, you need not have to do any programming. When you are exporting the file please remember these things to do:

    

   1. Under slicing choose 'Use slice objects'
   2. Under HTML style choose Dreamweaver

Fireworks will export a .htm file to thefolder specified (along with images). Browse the .htm file from IE or Netscape and you can see your swap images working.