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
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:
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.
- 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 new canvas
- 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
|
