In this tutorial I will show you how to add rollover images to your website, in the form of a navigation menu. Unfortunately Dreameaver is not a graphic application, so you will have to make your actual images in something else. Head over to the Photoshop section to learn how to draw a nice navigation menu. For the purpose of the tutorial, I will be using the images below. Feel free to save them to your hardrive and use them.

Initial Images

Rollover Images

We are going to place each button into a table cell, my navigation bar is 7 iamges long, and 1 image high, so lets make a similar table. Click on the Insert Table button on your object menu.

Fill in the variable discussed above, or customize it to fit your own navigation bar.

You should have a table similar to the one below, without the borders.

Lets start adding our images. The first and the last images in my navigation bar don't need a rollover effect, so we can add those with the normal add image button.

Now click inside your second table cell, the first place we are going to use a rollover image. This time click on the "Insert Rollover Image" icon on the object bar.

This will bring up a new options meny. Name your image whatever you like. The next two variables are the paths to the two images we will be using in the rollver. The "original" image is what is shown on a normal page load, the "Rollover" image is what is replaced when your mouse moves over the link.

You should have something like this, without he borders. Place your mouse over the "tutorials" link to see the rollover in action.

Repeat this process for each table cell.

Check out the navigation bar in action!