• 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 Chapter 6 of this book is titled "Cascading Style Sheets"

CSS Rollover Button using Single Image

Last time we created JS-CSS rollover buttons using two background images -- one background image fo the hover state and one background image for the default state. This time we will use the same rollover method but will be using only one background image instead. The advantage being that both the hover-state graphic and the default-state graphic are on the same image file and hence are loaded at the same time during page loads. This avoids any flicker-effect during hover-over cause by the extra loading of the hover-state graphics.

1. First we have to combine the graphic for the hover state and the graphic for the default state into one image. Here is the combined image which we will call buttonimages.gif ...

You can right-click and save this image to disk.

2. After you save this image to a folder, we will take the same HTML that we created last time and make modifications to it.

And that was all we did. View Live Code Here.

In the btnContinue class that is associated with the default state of the link button, you only see the blue button portion of the background buttonimages.gif. The reason that we do not see the orange part of the background image is because the anchor tag is only 89px by 27px. This is exactly big enough to see the blue button portion of the graphics.

In the btnContinue_hover class, the property...

background-position: bottom right;

is to position the background image so that the hover state portion (the orange part) of the image is visible. That property says that in the 89x27pixel window for the anchor tag, show the right side and the bottom portion of the background graphics.

Next Lesson:

There is another way of implementing rollovers. And that is with pure CSS using the hover psuedo-class. See next lesson.