Tab Content Script (v 2.0)

[demonangel1701]

1) Script Title: Tab Content Script (v 2.0)

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

3) Describe problem: Not Really a Problem as much as I need assistnace for a 'How-to'...

I'm using the new DD Tab Contact Script with images instead of the general 'tabs' (as described here: http://www.dynamicdrive.com/dynamici...suppliment.htm) and would like to know how to add a selected class for each image which would show essentially a 'Selected' tab image.

Any Ideas???

Thanks....

[ddadmin]

Right now you can only affect the selected tab using what's possible via CSS, so unless your tabs are styled using background images (which CSS can affect), you can't actually change a tab's image to something else (it's src property).

What you're asking is certainly possible though. Please post the HTML for your tabs themselves, just so I know what I'm working with here.

[demonangel1701]

I figured it out.

Here's the Markup (HTML):
<div id="flowertabs">
<a href="#" rel="tcontent1" id="tab_motive" class="selected"><img src="assets/spacer.gif" border="0" align="absbottom" class="tab_motive" /></a>&nbsp;
<a href="#" rel="tcontent2" id="tab_debts"><img src="assets/spacer.gif" border="0" align="absbottom" class="tab_debts"/></a>&nbsp;
<a href="#" rel="tcontent3" id="tab_assets"><img src="assets/spacer.gif" border="0" align="absbottom" class="tab_assets"/></a>&nbsp;
<a href="#" rel="tcontent4" id="tab_income"><img src="assets/spacer.gif" border="0" align="absbottom" class="tab_income"/></a>
<a href="#" rel="tcontent5" style="visibility:hidden;"></a>
</div>

Here's the CSS:
/* CSS for the Tabs */
a img {height: 19px; width: 84px; border-width: 0;}
a#tab_motive img {background: url(shade_motive.gif) top left no-repeat;}
a#tab_debts img {background: url(shade_debts.gif) top left no-repeat;}
a#tab_assets img {background: url(shade_assets.gif) top left no-repeat;}
a#tab_income img {background: url(shade_income.gif) top left no-repeat;}

a#tab_motive.selected img {background: url(shade_motive_over.gif) top left no-repeat;}
a#tab_debts.selected img {background: url(shade_debts_over.gif) top left no-repeat;}
a#tab_assets.selected img {background: url(shade_assets_over.gif) top left no-repeat;}
a#tab_income.selected img {background: url(shade_income_over.gif) top left no-repeat;}

a#tab_motive:hover img {background: url(shade_motive_over.gif) top left no-repeat;}
a#tab_debts:hover img {background: url(shade_debts_over.gif) top left no-repeat;}
a#tab_assets:hover img {background: url(shade_assets_over.gif) top left no-repeat;}
a#tab_income:hover img {background: url(shade_income_over.gif) top left no-repeat;}
/* End CSS for the Tabs */