Problem Setting up Tab Content using images

[printman55]

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

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

3) Describe problem:
http://www.rspsitedesign.com/TabCont...-Example2.html
What I am trying to do is use Demo#3 as my template and set up a group of horizontal tabs using backgroung images. The yellow file image is for the selected image on load. The green images should then be behind the remaining 3 tabs. When one clicks the second image, I would like it to change to the yellow file image and the yellow one that was open before change to green and so on. Also the text for the other tabs doesn't go in the designated box. I turned off the slide show feature. I would also be great if the image was also clickable which is addressed in the documentation, but I started with main problem. I would certainly appreciate help.
Steve

[ddadmin]

You can use images for the tabs themselves, though one limitation is getting the "selected" image to work, since it requires a different tab image altogether. The script applies the CSS class "selected" to the tab's A element in question, and since CSS can only swap backgrounds, not the actual element itself, you are confined to the following approaches:

1) Use images for the tabs as desired, but forgo styling the selected image using a different image.

2) Use a regular UL list and style the tabs using a background image of a tab interface for each link. The tricky part may be getting the CSS to look exactly the way you want. Here's a quick mockup I came up with:



Here's the full CSS/ HTML used:

<style type="text/css">

.imagemenu{
border-style: none;
}

.imagemenu ul{
margin: 0;
padding: 0;
float: left;
overflow: hidden;
background: blue;
}

.imagemenu ul li{
display: inline;
}

.imagemenu ul li a{
float: left;
display: block;
width: 140px;
height: 40px;
padding-top: 15px;
color: white;
border-style: none;
text-align: center;
background: white url(http://i43.tinypic.com/f0srjl.gif) center center no-repeat;
text-decoration: none;
}

.imagemenu ul li a:visited{
color: white;
}

.imagemenu ul li a.selected{
background: white url(http://i42.tinypic.com/dfomw.gif) center center no-repeat;
}

</style>

<h3>Demo #3- Different Tab Style, "slideshow mode" enabled</h3>

<div id="pettabs" class="imagemenu">

<ul>
<li><a href="#" rel="dog1" class="selected">Tab 1</a></li>
<li><a href="#" rel="dog2">Tab 2</a></li>
<li><a href="#" rel="dog3">Tab 3</a></li>
</ul>
<br style="clear: left" />

</div>

<div style="border:1px solid gray; width:550px; height: 150px; padding: 5px; margin-bottom:1em">

<div id="dog1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
<p><b><a href="javascript: mypets.expandit('myfavorite')">Click here to select tab with id="myfavorite"</a></b></p>
</div>

<div id="dog2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>

<div id="dog3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>

<div id="dog4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>

</div>

[printman55]

Thanks so much for your help. In the meantime I have worked out the tab issues not using images which as you pointed out is difficult to work with, but the Demo #1 Basic
http://www.rspsitedesign.com/TabCont...-Example3.html .
I do have a question on this example: How do you get two lines of text in the same tab??
Thanks,
Steve

[ddadmin]

That would be a CSS issue as well- getting multiple lines to appear within the tabs that is. I don't have an example of this offhand, but I'm pretty sure I've seen threads on this in the past. Also, try doing a search on Google for multi line tabs.

[printman55]

Will do and thanks again.