CBT Cafe Logo  

CBT Cafe > Dreamweaver > Menus & Rollovers

Dreamweaver MX & Fireworks MX: Creating Rollover Images

Version: Dreamweaver MX, Fireworks MX
Level: Basic
Source Files: Download
Objectives: To create a JavaScript rollover using Dreamweaver MX's Insert Rollover command
Tools & Techniques: Behaviors, Insert Rollover, Rollover images
Final Example: Preview

In this lesson we'll create one of the most common techniques on web sites: Rollover images.

Note: Each image you have "rollover" is actually 2 images: 1 for the Up state and the for the Over state. Keep this in mind when creating your rollover graphics. The effect can be wonderful but you should also weigh the benefit of the effect against the download time of your pages. Too many rollover images can cause unnecessary download times to your pages.

Step 1: Creating the Rollover Graphics in Fireworks MX

In our example, the menu contains 3 buttons: about | contact | services. Each button has 2 states: The Up state and the Over state. This gives us a total of 6 graphics. This looked in Fireworks MX before exporting:

Button Graphics

It's very important that you export each graphic at the same size or your rollover images can be distorted.

In the image above, the bottom graphics (the Over state) are larger than the top ones. In order to ensure our images are the same size, we'll create a canvas the size as the largest image and then export every image from that canvas size.

The image size for each of the bottom graphics is: 101x24.

  1. Create a new file 101x24
  2. Place the larger (Over) graphic on the new canvas
  3. Set the X and Y coordinates in the Property Inspector to 0,0. This ensures the graphic is perfectly placed on the new canvas
  4. Copy the smaller (Up) graphic to the new canvas and line up the text so that it aligns with the bottom text
About buttons
  1. Turn off the visiblity of the Over image (bottom layer) by clicking the Show/Hide Icon (the eyeball graphic). We're going to export the Up graphic first.
  2. Set the Optimize panel to Gif | Adaptive | 8 Colors
  3. Export the image and name it: "about_Up"
  4. In the Layers Panel, turn the visibility off for the "Up" graphic and turn the visibility on for the "Over" graphic
  5. Set the Optimize panel to Gif | Adaptive | 8 Colors
  6. Export the image and name: "about_Over"
  7. Repeat steps 1-10 for the remaing 2 buttons


Page 1 | Page 2


Home | Dreamweaver | Fireworks | Flash | Photoshop | Elements | PowerPoint| Ebay | QuickTime Pro | Flash 5 CD | Fireworks MX CD | QuickTime Support | Contact

Copyright © 1999-2011 CBT Cafe, All rights reserved

Flash®, Fireworks™, and Dreamweaver® are registered trademarks of Macromedia, Inc. in the United States and/or other countries
Photoshop®, Photoshop Elements® and Illustrator® are registered trademarks of Adobe Systems, Inc.
QuickTime® is a registered trademark of Apple Computer, Inc.
Ebay® is a registered trademark

CBT Cafe | Multimedia Learning | Interactive Graphics