Learn how to create rollover buttons in Dreamweaver and Fireworks
Macromedia has made it very simple to create rollover buttons.
In this tutorial you'll learn how to make rollover buttons in both
Dreamweaver and Fireworks. We usually use Dreamweaver to insert
rollovers so we'll start with Dreamweaver.
Rollover Buttons in Dreamweaver
- First design your rollovers in Fireworks. You need to design
the button as well as the rollover and export it to your site
- Open your html file in Dreamweaver. Click on Insert>Rollover
Image and select the image as well as the rollover image from
your folder. Give the image a suitable name and choose a link.
Click on OK.
You're done! You've successfully created a rollover button in Dreamweaver.
Preview the file in your browser to test the rollover.
Buttons in Fireworks
In Fireworks you have to use the Behavior palette to create
- Again the first step is to design your images and rollovers
in Fireworks. Make sure your rollovers are in the exact same place
as your rollovers. Put your images in one layer and your rollovers
- Now you need 2 frames. Frame 1 should have the actual images
and frame 2 should have the rollover images.
- Insert slices on each of the images (Insert>Slice)
and name it appropriately for easy reference.
- Click on the slice and go to Window>Behaviors.
- Now click on the '+' button and choose Simple Rollover.
- Click on OK
- Repeat the behavior steps for each of the slices.
- The last step is to export the file. Fireworks will automatically
any programming, its automatically done for you when you export
the file. You just need to focus on the design and Fireworks takes
care of all the boring programming for you. When you export the
file there are two things you need to remember to do:
- Under slicing you need to choose '
- Under HTML style choose
Fireworks will export a .htm file to the directory you have
specified (along with the images). Browse the .htm file from IE
or Netscape and you'll see your swap images working beautifully.
Hope you enjoyed this tutorial. Don't miss our Dreamweaver
tips and Fireworks
Please Like, Tweet or Share this page if you found this resource useful!
Join us on Facebook to keep updated with all the latest tutorials and web design freebies from EntheosWeb!