Dreamweaver: Creating Rollover Buttons

This short tutorial is designed to show you how to quickly create roll-over buttons in Dreamweaver without having to mess around with JavaScript.

Step One: Create your Graphics

The first thing you need to do of course is to create two graphics for your buttons - One for then the button is in its normal, (off), state and one for when the button is rolled-over with the mouse cursor, (on).

You should make sure these graphics are the exact same size in order to get the best effect, and you should also make sure that any text you add to the graphic is in the same place on both graphics. You can use layers and guides in Paintshop Pro of Adobe Photoshop to get this accurate.

When you have created your graphics, you can proceed with the next steps. The two images I have created for this tutorial are displayed below.

Step 2: Create the Rollover

Now we have the graphics sorted we can create the rollover in Dreamweaver. Open the page you would like the rollover graphic on in Dreamweaver, and click on the place you would like to have it appear.

Then follow the steps below:

Click on the Insert menu, and choose Interactive Images ->Rollover Image. The following Screen will appear.
Complete the fields on the screen by specifying a unique name for the image, the 'off' image you created, the 'on' image you created, the alterative text for the image, and a URL to go to when the graphic is clicked.
Click the OK button and your rollover button should appear on your page. Preview the page by pressing F12 and all should be fine.

You know now how to create simple rollover buttons in Dreamweaver!