• Lesson Index:
• Introduction
• Table Tab Menu
• Overview
• Table Structure
• Cross Browser Issues
• Hover Effect
• Replacing Tab Image
• Remove Bottom Border
• Duplicating the Pages
• Javascript Rollover
• RollOver Images
• Examine the Code
• JS with CSS-class
• Use Single Image
• CSS Rollover Buttons
• CSS Hover Rollovers
• Use Single Image

Dreamweaver 8 Hands-On-Training Chapter 11 titled Rollovers provides more information on simple rollover, disjointed rollovers, and navigation bars with multiple rollover states.

Creating Javascript-based Rollover Buttons Using Dreamweaver

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.

View Live Code Here

That was easy, wasn't it? Dreamweaver did all the work for us. We will look at the code in the next lesson.

Next Lesson: