Advanced Rollovers
by Greg Mansfield
Programs Used: Dreamweaver 4<>
There is a lot more than one way to construct a rollover; when working with Dreamweaver, you can create some really interesting rollovers even if you have minimal knowledge of javascript (javascript is the language used in html to produce many dynamic effects). This tutorial will show you how to create rollovers for images other than the one with the MouseOver attribute.
Before you start, you will need 4 images, placed into an images folder where
your html document is. They don't need to look exactly like mine, just make
a button with a rollover and an extra image with a rollover:
| rollover_01.gif |
rollover_01-over.gif |
rollover_02.gif |
rollover_02-over.gif |
 |
 |
 |
 |
STEP ONE: Open up Dreamweaver and insert the first image (rollover_01.gif), using
the "Insert Image" button (figure 1). Use the "Image Properties"
window to rename the image "Rollover" (figure 1).
STEP TWO: Now insert a second image (rollover_02.gif) on the right of the "Rollover" image. Call this image "Swap" (figure 2).
STEP THREE: Now left-click once on the "Rollover" image to select it (figure
4). Press [SHIFT] + [F3] on your keyboard to open up the "Behaviors"
window, or alternatively use the "Window & Behaviors" menu
command (figure 4).
STEP FOUR: Make sure the "Rollover" Image is still selected, then click
on the "+" button in the behaviors panel (figure 4). Select the
"Swap Image" menu command (figure 4).
STEP FIVE: - This will open the "Swap Image" window. You should see a window
similar to the one in figure 5. There will be 2 images to choose from: "Rollover"
and "Swap".
STEP SIX: While the "Rollover" image choice is selected, click on the
browse button for the "Set Source to" field. This field specifies
which image your "Rollover" image will swap to when the cursor
is placed on the image. Find the "rollover_01-over.gif" image
and press "Select". A small asterix will appear next to the image
choice (figure 6), and your rollover image will appear in the "Set
source to" field. Do not press "OK" just yet.
STEP SEVEN: Select the "Swap" image choice, and click on the browse button
once more. Select the "rollover_02-over.gif" and press "Select".
The image should appear in the field and another asterix will appear next
to the image choice (figure 7).
STEP EIGHT: Click "OK" now, and your behavior panel should display an onMouseOut
and an onMouseOver attribute for the "Rollover" image (figure
8). Save your document, then preview it in your preferred browser. When
you rollover the "Rollover" image, the "Swap" image
should also change. Move your mouse off the image, and both will swap back
to the original images (figure 8).
Now that you can see what you can do with this useful behavior, try experiment
to create other great effects. Try having more than 2 images swap at one
time, or have several different rollovers swapping the same image to create
something different for your site.
|
Printer
Friendly Version