using images for the Ajax content tabs

[Foundas]

1) Script Title: Ajax Tabs Content Script (v 2.2)

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

3) Describe problem: I am using the modified version having 2 DIVS to display content and i want to have pictures instead of automatically generated tabs.

Here is my code:


<div id="pettabs" class="indentmenu">
<ul>
<span><a href="#1" rel="#default1" class="selected">DIV-1</a></span>
<span><a href="external2.htm" rel="#iframe">DIV-2</a></span>
<span><a href="#2" rel="#default3">DIV-3</a></span>
</ul>
<br style="clear: left" />
</div>

<div id="petsdivcontainer" style="border:1px #ccc solid; width:606px;">
<div id="default1">DIV CONTENT 1</div>
<div id="default3">DIV CONTENT 3</div>
</div>




The 3 tabs are generated automatically but i wish to replace them by images which have rounded corners and better looking than the standard tab style.
I suppose, there should be 6 images in total. Inactive/Active for each tab
Inactive is an image of grey background and black font colour
Active is another image of blue background and yellow font colour

So, once page is loaded, DIV-1 is selected, the image should be the ACTIVE. The inactive tabs, will have the INACTIVE images....When Div-2 is selected, the inactive image should be replaced by the active whereas, the other 2 tabs should have the inactive image

Any advice on this would be highly appreciated

Thanks in advance

Foundas