Using different images for the tabs

[Foundas]

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

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

3) Describe problem: Use images to generate the tabs

Hi all,

i am using the Tab Content Script (v 2.2) on my page and it works great. Is there a way to use different images for the tabs (when active and when inactive) for each tab? For instance, the first tab to use image1_active.gif and image1_inactive.gif, second tab to use image2_active.gif and image2_inactive.gif and so on.

Your help would be greatly appreciated.

Thanks in advance

Foundas

[rangana]

You can give each of the links a unique identifier and feel free to style them via CSS.

Let me quote DD's default markup:


<li><a href="#" rel="country1" class="selected" id="tab1">Tab 1</a></li>
<li><a href="#" rel="country2" id="tab2">Tab 2</a></li>
<li><a href="#" rel="country3" id="tab3">Tab 3</a></li>
<li><a href="#" rel="country4" id="tab4">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com" id="tab4">Dynamic Drive</a></li>


...add highlighted.


Then, on your CSS, you can freely define each of them:


a#tab1{
background:url('image_for_tab1');
}
a#tab2{
background:url('image_for_tab2');
}
a#tab3{
background:url('image_for_tab3');
}
a#tab14{
background:url('image_for_tab4');
}


Hope that makes sense.

[Foundas]

I applied the following css and it works beatifully:


a#tab1{
background:url('../../images/1page_button1_OFF.gif');
}

a#tab1.selected{
background:url('../../images/1page_button1_ON.gif');
}

a#tab2{
background:url('../../images/1page_button2_OFF.gif');
}

a#tab2.selected{
background:url('../../images/1page_button2_ON.gif');
}

a#tab3{
background:url('../../images/1page_button3_OFF.gif');
}

a#tab3.selected{
background:url('../../images/1page_button3_ON.gif');
}

a#tab4{
background:url('../../images/1page_button4_OFF.gif');
}

a#tab4.selected{
background:url('../../images/1page_button4_ON.gif');
}


Thanks for your help rangana

regards