This tutorial will show you how to create a rollover image with Dreamweaver.
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).
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.
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:
The following will display:
For example, my image name is home.
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.
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.
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!