tabs script

[pstar]

1) Script Title: DD Tab Menu II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ddtabmenu2.htm

3) Describe problem:

I would like to know how I can alter this script to use 8 of my own image tabs. 4-on and 4-off images.

My tabs:

/images/locate-on.gif
/images/locate-off.gif
/images/buy-on.gif
/images/buy-off.gif
/images/sell-on.gif
/images/sell-off.gif
/images/myaccount-on.gif
/images/myaccount-off.gif

I need to do it this way because my images are not just tab shape they have text on them.

[jscheuer1]

One of the central concepts of the tab menu is to conserve on bandwidth, code, and download times by using the same two images as background for the text of each link.

If you must forgo these efficiencies, here is where the image rollover behavior is set, in the styling (from Step 1):

#ddimagetabs a{
display: block;
text-decoration: none;
font: bold 12px Arial; /*tab font */
color: black; /*font color */
width: 86px; /*width of tab image */
height: 22px; /*height of tab image */
float: left;
display: inline;
margin-left: 4px; /*spacing between tabs */
padding-top: 4px; /*vertical offset of tab text from top of tab*/
background-image:url(bluetab.jpg); /*URL to tab image */
background-repeat: no-repeat;
text-align: center;
}

#ddimagetabs a:hover, #ddimagetabs a.current{
background-image:url(bluetabover.jpg); /*URL to tab image onmouseover */
color: black;
}

To individualize the rollovers, each anchor link could be given a unique id (from Step 2):

<div id="ddimagetabs">
<a id="link1" href="http://url/" onMouseover="expandcontent('sc1', this)">Home</a> <a id="link2" href="http://url/" onMouseover="expandcontent('sc2', this)">New</a> <a id="link3" href="http://url/" onMouseover="expandcontent('sc3', this)">Revised</a><a id="link4" href="http://url/" onMouseover="expandcontent('sc4', this)">Submit</a>
</div>

You would then remove the background-image declarations (and only the background-image declarations) from the Step 1 style and create new ones for each link:

#ddimagetabs a#link1 {
background-image:url('/images/locate-off.gif');
}
#ddimagetabs a#link2 {
background-image:url('/images/buy-off.gif');
}
#ddimagetabs a#link3 {
background-image:url('/images/sell-off.gif');
}
#ddimagetabs a#link4 {
background-image:url('/images/myaccount-off.gif');
}

#ddimagetabs a#link1:hover, #ddimagetabs a#link1.current {
background-image:url('/images/locate-on.gif');
}
#ddimagetabs a#link2:hover, #ddimagetabs a#link2.current {
background-image:url('/images/buy-on.gif');
}
#ddimagetabs a#link3:hover, #ddimagetabs a#link3.current {
background-image:url('/images/sell-on.gif');
}
#ddimagetabs a#link4:hover, #ddimagetabs a#link4.current {
background-image:url('/images/myaccount-on.gif');
}

Since you would not be using any text, you should place a   entity in each link's text area (example for one link):

<a id="link1" href="http://url/" onMouseover="expandcontent('sc1', this)">&nbsp;</a>

[mwinter]

Since you would not be using any text, you should place a   entity in each link's text area ...

If the OP isn't going to be using text, then either img elements (with appropriate replacement text) should be used with a scripted rollover, or an "image replacement" technique should be used. I dislike the latter as they always tend to fail in some way.

<a id="link1" href="http://url/" onMouseover="expandcontent('sc1', this)">&nbsp;</a>

If the OP did use something like that, the document risks becoming unnavigable without images enabled.

Mike

[jscheuer1]

If the OP did use something like that, the document risks becoming unnavigable without images enabled.

Yet another reason not to forgo the efficiencies of the original script. And, yes, for image disabled/unavailable browsers the changes that I outline would make the page difficult, not impossible to navigate. It would still have navigable links, if the mouse cursor were hovered over the right areas. Remember, these 'links' aren't links, the links are in the tab content areas.

I like the idea of foreground image rollovers for this though, it would be more accessible if javascript and images were disabled, provided that the markup and site design were such to take advantage of the completely different navigational system that could be made available to users with that configuration (similar to the way the menu in its default format can be made to do, though you can bet the farm that few folks go the extra mile to set this menu up that way for their differently abled/browsered users).