PDA

View Full Version : Ajax Tabs Content - want images for tabs



davebarnes
09-26-2007, 02:49 PM
1) Script Title:
Ajax Tabs Content script

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/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
09-27-2007, 05:24 AM
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
09-27-2007, 01:14 PM
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
09-28-2007, 07:46 AM
Thanks for posting that. I'm sure it will help some other members as well.