Creating a rollover button
This is just one of the many ways of creating rollover buttons in Dreamweaver.
I'm going to make a couple of assumptions for this lesson.
- You have created a two-stage button in PhotoShop.
- You have imported the regular state onto your page following the "Importing
images" lesson and have named the image in the Properties panel.
- Select the button image and click on the gear icon at the bottom right
of your page (or Window>Behaviors).
- Click and hold the "+" icon in the Behaviors panel. Select "Swap
Image". If "Swap Image" is grayed out, make sure you have
selected the image on the page.
- The Swap Image window opens with the image you have select highlighted
in a list of names. If you named your images it will be o easy to identify
all of your artwork; if not, you probably see a list of "unnamed <image>".
Where it says, "Set source to:" click on the folder to the right
and browse to the OVER state of your button. This is where good naming helps.
Typically I name my regular image home.gif and its rollover state home_f2.gif
(because I work in Fireworks, it names files that way automatically).
When you have found your image, click on it and MAKE SURE "Relative
to" says "DOCUMENT" not "SITE".
- Click Open. Accept the defaults in the check boxes. We do
want the images to preload (prevents lag time when a user rolls over the
image) and we want to restore image on MouseOutwe want our original
image to appear when the mouse rolls off the button. Click Okay.
- The Behaviors panel should now show (onMouseOut) and (onMouseOver). Dreamweaver
- With the image still selected, look at the Properties
If you were just creating a rollover (no linking) you need to leave it or
put "#" in its place. If you try to clear the window, the rollover
code will break (Dreamweaver does warn you).
To make the image link to another page or site, type the address in the
Link window or click on the folder icon and
find it in your site.
Next, uploading to a server
Copyright 2003 | Something Graphic
20 November, 2003