Ajax Tabs Content - want images for tabs

[davebarnes]

1) Script Title:
Ajax Tabs Content script

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

3) Describe problem:
I want to use images instead of text for the tabs.

My website is: http://www.attunesystems.com/ and on the left-hand side I am using the ATC script for the "News Events Case Studies" tabs which currently text.
I want to replace the text with images that will change color (rollover) upon hover and selection.
My current code is:

<li><a href="/English/News_Events/Homepage_Events.html" rel="ajaxcontentarea">Events</a></li>

and I tried replacing it with:

<a href="/English/News_Events/Homepage_Events.html" rel="ajaxcontentarea" onMouseOver="MM_swapImage('events1','','/English/Images/Buttons/HP_Events_off.gif',0)"><img src="English/Images/Buttons/HP_Events_on.gif" alt="Events" border="0" width="42" height="16" name="events1" style="padding-top:10px;" /></a>

and the result is that the external page appears in its own window instead of the div.
I then tried using a different rollover script from Dynamic Drive instead of the Macromedia script

<a href="/English/News_Events/Homepage_Events.html" rel="ajaxcontentarea"><img src="English/Images/Buttons/HP_Events_off.gif" class="domroll /English/Images/Buttons/HP_Events_on.gif" border="0" /></a>

but, the result is the same.

So, how do I use images instead of text?

thanks,
dave

[ddadmin]

The script right now assumes the tabs are contained by the LI tags- when you remove that container, the script thinks there are no tabs at all.

Instead of simply removing the <li> element from each tab, try replacing it with another container tag, such as <span>:

<span><a href="/English/News_Events/Homepage_Events.html" rel="ajaxcontentarea"><img src="English/Images/Buttons/HP_Events_off.gif" class="domroll /English/Images/Buttons/HP_Events_on.gif" border="0" /></a></span>

Then, inside ajaxtabs.js, do a search and replace, replacing all instances of "li" with "span" instead. This should do it.

[davebarnes]

Very helpful.

I changed these lines in ajaxtabs.js:

15:

var TabContainerType = "span" // the type of container that the tabs are in, e.g, <li>, <span>, <td>

39:

var ullist=targetobj.parentNode.parentNode.getElementsByTagName(TabContainerType)

105:

var ulist=ulobj.getElementsByTagName(TabContainerType) //array containing the LI elements within UL

and now I can use any type of container for my tabs.

[ddadmin]

Thanks for posting that. I'm sure it will help some other members as well.