• Calendars
• Date & Time
• Document Effects
• Dynamic Content
• Form Effects
• Games
• Image Effects
• Links & Tooltips
• Menus & Navigation
• Mouse and Cursor
• Scrollers
• Text Animations
• User/System Preference
• Window and Frames
• Other
• XML and RSS

• Script Forums
• Recommend Us
• Usage Terms
• Free JavaScripts

• IE5+: IE 5 and above
• FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
• Opr7+: Opera 7 and above.

Note: Updated August 29th, 06. Overhauled CSS of image tabs for easy configuration.

Description: Similar to DD Tab Menu, this second version uses images instead for the tabs themselves. The script creates a standards compliant, 2 level tab menu (can be set to single level as well). Move your mouse over a tab, and additional content appears beneath it. It uses CSS to control all of its appearance, and plain HTML to implement the entire menu markup. Highlights of this script are:

• Standards compliant, with menu tabs and sub contents defined using plain HTML, making customization a breeze.
• Entire menu and its contents search engine friendly.
• Set which menu tab and optional sub content should initially be shown when the page first loads.
• Easily toggle between a two level (default) and single level tabs menu. For the later, the entire second level is hidden, allowing you to use this script simply as basic tab links.

Demo:

Directions

Step 1: Insert the below CSS and script into the HEAD section of your page:

The CSS above allows you to control all visual aspects of the tab menu and content in one central location. Read the adjacent comments to change them. A variable within the DHTML script also allow you to configure the menu further.

Step 2: Add the below HTML to where you wish the tab menu to appear on the page:

Step 3: Finally, the script a single image for its interface (which you can change by editing the code of Step 1). Download it below:

More information

The code of Step 2 contains the plain HTML that will render the menu. Structurally it is broken up into two parts:

1) The menu tabs:

Each tab is implemented as a list link. Here the first 3 tabs have a sub content associated with them, which you specify by inserting the "onMouseover..." code inside the links' A tag. Read on for more info.

2) The menu contents:

Following the tabs is a DIV that contains the sub contents associated with select tabs above:

<DIV id="tabcontentcontainer">

<div id="sc1" class="tabcontent">
2nd level content 1 here.
</div>

<div id="sc2" class="tabcontent">
2nd level content 2 here.
</div>

</DIV>

Each sub content is defined by wrapping it inside a DIV with an arbitrary but unique id (ie: sc1), in which this ID should match up with that specified in the "OnMouseover..." code of the tab link above:

<div id="sc1" class="tabcontent">
2nd level content 1 here.
</div>

And that's it!