Rollover Images

Adding rollover images is a nice way to add some eye candy to your site. In order to create a rollover image, you'll need two images for each navigation item and some javascript.

If you don't know how to write javascript, there's plenty of free scripts out there. You can check out sites like Hotscripts, Javascripts, or Javascript Kit and follow their directions. If you have Dreamweaver, it will write the javascript for you.

This tutorial will show you how to create a rollover image with Dreamweaver.

STEP ONE

First thing you'll need are two images. The first will be the original (when the mouse is not over it) and the second will be the rollover (when the mouse is hovering over it).

Home Home On

As you can see, the only difference between the two is the direction of the gradient. The image on the right is the rollover image which has the lighter color on the bottom.

STEP TWO

Now in Dreamweaver, make sure your Insert toolbar is displaying. You can go to Window > Insert to make sure it's selected. On the Common tab, choose the following button:

Rollover step 1

STEP 3

The following will display:

Rollover step 2

Image Name:
For each image, you should give it a unique name. This name is used within the javascript, so if you use the same name for all the images, the script will not work successfully.

For example, my image name is home.

Original Image:
This is the location of your original image (when the mouse is not over it). You can click on the Browse button and navigate to where your image is.

For example, my image location is images/home.gif.

Rollover Image:
This is the location of your rollover image (when the mouse is hovering over it). You can click on the Browse button and navigate to where your image is.

For example, my image location is images/onhome.gif.

Preload rollover image:
Make sure this is checked. This will preload the rollover images while the page is loading. This is a good thing. If you didn't, then when the user's mouse hovers over the image, the rollover image will download at that moment. It may take a couple seconds and the rollover won't have the same effect. By preloading the image, the image will already be in memory and will appear instantly for the rollover effect.

Alternate text:
If the image didn't load for some reason, it will display this text instead of the image. This is good since users will still be able to see the navigation options. It also shows the text for a brief moment when the mouse is over the image.

For example, my alternate text is Home.

When clicked, Go to URL:
When a user clicks on this image, where should it take them?

For example, the home image will lead you to the index.htm page.

That's it! You would use step 2 and 3 for each navigation image you need. Have fun with rollover images!

More Dreamweaver Tutorials