In these next few lessons, you will learn how to implement this button in Dreamweaver such that when you hover over the button, the graphic changes.

This is a Javascript-based method so the users must have Javascript enabled in their browsers in order to see it work. Most users do have Javascript enabled, so that would not be an issue. Alternatively, the same effect can be achieve using a CSS-based method that does not rely on Javascript. You can find this CSS-based method in the next series of lessons.

We show you the Javascript based method first because it is actually easier if you have Dreamweaver. You don't even need to know anything about Javascript. Dreamweaver will write the Javascript for you.

We start with the following two images. The first is the default state and the second image is the rollover state...

You can get these two images by right-clicking on them and do a "File -> Save Picture As". You can learn how to draw buttons like these in Fireworks with this tutorial.

1. Once you have saved the two images to a folder, use Dreamweaver to create an index.html page in the same folder.

2. Put the cursor on the HTML page where you want to insert the rollover button and select Insert -> Image Objects -> Rollover Image...

2. Enter the image filenames and other settings in the Insert Rollover Image dialog...

3. Click OK and Dreamweaver will insert the code in your HTML.

4. Save the HTML file and preview in browser.

5. As you hover over the button, the graphic changes. The alternate text is shown in a yellow tooltip if you are using Internet Explorer. Clicking the button will take you to the destination URL specified in the dialog.

-Learn Web Design Online.com