MX & Fireworks MX: Creating Rollover Images
Version: Dreamweaver MX, Fireworks MX
Source Files: Download
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
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
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
a total of 6 graphics. This
looked in Fireworks MX before exporting:
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.
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.
- Create a new file 101x24
- Place the larger (Over) graphic on the new canvas
- Set the X and Y coordinates in the Property
Inspector to 0,0. This ensures the graphic is
perfectly placed on the
- Copy the smaller (Up) graphic to the new canvas and
line up the text so that it aligns with the bottom text
- 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.
- Set the Optimize panel
to Gif | Adaptive | 8 Colors
- Export the image and name it: "about_Up"
- In the Layers Panel,
turn the visibility off for the "Up" graphic and turn the visibility on for the "Over" graphic
- Set the Optimize panel to Gif | Adaptive | 8 Colors
- Export the image and name: "about_Over"
- Repeat steps 1-10 for the remaing 2 buttons