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
- Design the rollovers in Fireworks. You have to design the button
and the rollover then export it to the site folder.
- 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.
- 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.
- Then you need 2 frames. The actual images
in Frame 1 and frame 2 should have the rollover images.
- Insert slices on each of the images (Insert>Slice) and name
it.
- Click on the slice and go to Window>Behaviors.
- Then click on the '+' button and choose Simple Rollover.
- Click on OK
- Repeat the behavior steps for each slices.
- 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:
- Under slicing choose 'Use slice objects'
- 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.
|
