• 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

Table Tab Menu: Replacing the Tab Image

In the previous lesson, we had built a working menu with this code here. You can use the same code to create different style of menus simply by altering the background tab image.

As an example, let's replace the default_tab.gif and the highlighted_tab.gif image files with the ones shown below. You can get the image by right-clicking on them and saving them to disk.

default_tab.gif          highlighted_tab.gif

Then c hange the hover text color from #FFFFCC to #993300.

Now you got ...

View Live Code

Note that base of the tab is made the same color as the white content area color with the intention that it looks like the tab connects with the page. However, we must get rid of the horizontal bottom border under the selected tab. We will learn how to do this in the next lesson.

Next Lessons

You have now got tabs that changes state when you hover over them. In the next two premium lessons, we will learn to remove the bottom border from the selected tab. We will also duplicate the page to make all three pages work.

Next Lesson: