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:
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
|
