| You are here : : Home > Free Resources > Fireworks Tutorials & Resources > Rollover Buttons |
Fireworks CS4 Tutorials
- Batch Processing New!
- Cool New Features
- Create a Collage
- Creating Pages
- Create a Slideshow
- CSS Export
- Layout Design
- Layout Design With Curves
- Linking Pages & Creating a PDF
- Trace & Draw an Image
- Fireworks Tips
- Fireworks Web Design
- Swap Images
- Drop Down Menus
- Animated Gifs
- Rollover Images
- Paste Inside
- Borders & Frames
- Patterns
- Screenshots
Image Effects
- Blur & Overlay Effect New!
- Change Image Color
- Horizontal Line Effect
- Cool Photo Frames
- Crayon Effect
- Twist & Fade Effect
- 3 D Zoom Effect
- Photo-Negative Effect
- Grayscale Effect
- Night Vision Effect
- Old Photographic Style
- Feather Effect
- Fading Effects
- Pencil Drawing Effect
Text Effects
- Chocolate Text
- Motion Trail Effect
- Patterned Text
- Textured Text
- Transparent Text
- Typography Art New!
Free Fireworks Resources
Other Fireworks Resources
Featured Fireworks & Dreamweaver Template
|
Rollover Buttons
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 folder.
- 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.
In Fireworks you have to use the Behavior palette to create rollover buttons.
- 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 in another.
- 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 convert the rollovers to javascript and html. You don't have do 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 (or 3.0)
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 tips!
No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.
