Information Technology Reference
In-Depth Information
The simplest or two state rollovers require you to create two graphics.
One is the graphic that will be “rolled over”. This is usually a navigation button
or a graphic that triggers the appearance of other graphics. The second graphic
is the replacement image that shows when the mouse over occurs. In the case
of a navigation bar, the second graphic usually has visual contrast to the first
graphic. Graying out or adding borders around the replacement graphic are
typical techniques.
Multiple state rollovers can also be created. You can assign a different image
for each occurrence of mover over and mouse down. In this case you would
need three graphics. One for the button also known as the mouse out state (the
mouse is not on the graphic), or the beginning state. The second graphic is for
the mouse over state, and the third graphic is for the mouse down state.
To create rollover graphics you can use the PNG file you created in Macromedia
Fireworks, hide your slices in the layers palette and alter the existing buttons
you created. Maybe change the text color or add a color border around the
shape. You can also lower the opacity of an image to show a rollover effect.
Try one of the mentioned changes to the graphic. Don't worry about style and
visual impact, just try it. You will be making many buttons and many rollovers
as your Web portfolio design evolves.
Then, show your slices again and then right click (CTRL+click) on the image
to
Export Selected Slice. The name will be same as the slice you
exported. Add the suffix _roll before the .jpg or .gif file extension.
This
will allow you to see the rollover image quickly when you are creating the
rollovers in Dreamweaver. Save the files to your
firstinitiallastname/images
folder.
(Use your root directory, images folder.)
Keep in mind that if you use the existing table that you exported from Fireworks
in Chapter Six, you must keep the images the same size; otherwise the table will
scale the graphic to fit the space. The result is less that eloquent and should not
be a part of your Web portfolio design. The rule here is that if you create
rollovers in a table, both images must be the same size. You can create rollovers
that affect different images other than the source image. This means that one
image can trigger the change of another. This effect is great for menu previews
of your work. The user rolls over the menu item RESUME, and below in a blank
or populated area swaps in a thumbnail image of your resume.
