mellonivn

Hola, tengo un problema, estoy modificando una página y tengo un menú distribuido en solapas color celeste, estas cuando se pasa el mouse por arriba cambian a color blanco y lo que tengo que hacer es cuando selecciono una, esta quede en color blanco y las otras celeste, y así cada vez que selecciono una solapa.
El tema es que el fondo de las solapas está formado por dos imagenes la esquina y el resto de la solapa, cada imagen está dividida en 2 partes: una parte celeste (arriba) y una parte blanca (abajo). Cuando se pasa el mouse por arriba, cambian las dos imagenes de color, pero lo único que pude hacer es: seleccionar cada solapa y solo una imagen cambia, a pesar de que el código es para las 2 imagenes, y además cuando selecciono otra solapa, la anterior seleccionada no vuelve al color celeste, porque si trato de hacerlo así, me selecciona y cambia de color la primer solapa seleccionada y después ya no, y el efecto de cambiar de color en el evento onmouseover deja de hacerlo.

en el css tengo:

...
#tabs a {
float:left;
background:url("../images/tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}

#tabs a span {
float:left;
display:block;
background:url("../images/tabright.gif") no-repeat right top;
padding:5px 15px 4px 6px;
/*color:#666;*/
}

#tabs a:hover {
background-position:0% -42px;
}

#tabs a:hover span {
background-position:100% -42px;
}
...


en el index tengo:

...
<div id="tabs"><!--COMIENZO tabs-->
<span id="esquinaIzq">&nbsp;</span>
<span id="esquinaDer">&nbsp;</span>
<ul>
<li><a href="#" id="ley" onclick="Effect.cambioTab('ley','leyes','contenido ');" title="Leyes"><span>Leyes</span></a>
</li>
<li><a href="#" id="decreto" onclick="Effect.cambioTab('decreto','decretos','co ntenido');" title="Decretos"><span>Decretos</span></a>
</li>
<li><a href="#" id="resolucion" onclick="Effect.cambioTab('resolucion','resolucion es','contenido');" title="Resoluciones"><span>Resoluciones</span></a>
</li>
</ul>
</div>
...

y en funciones.js:

Effect.cambioTab = function(elem,element,container){

var itm = document.getElementById(elem);

if (itm.id == 'ley'){
new Effect.Transform([
{ "#tabs a#ley": "float:left; background:url('../images/tableft.gif') no-repeat left top; margin:0;padding:0 0 0 4px;text-decoration:none;background-position:0% 42px;" },
{ "#tabs a#ley span": "float:left;display:block; background:url('../images/tabright.gif') no-repeat right top; padding:5px 15px 4px 6px; background-position:100% -42px;" }
],{ duration: 0.6 }).play();
}else{
if (itm.id == 'decreto'){
new Effect.Transform([
{ "#tabs a#decreto": "float:left; background:url('../images/tableft.gif') no-repeat left top; margin:0;padding:0 0 0 4px; text-decoration:none; background-position:0% 42px;" },
{ "#tabs a#decreto span": "float:left;display:block; background:url('../images/tabright.gif') no-repeat right top; padding:5px 15px 4px 6px; background-position:100% -42px;" }
],{ duration: 0.6 }).play();
}else{
if (itm.id == 'resolucion'){
new Effect.Transform([
{ "#tabs a#resolucion": "float:left; background:url('../images/tableft.gif') no-repeat left top; margin:0;padding:0 0 0 4px; text-decoration:none; background-position:0% 42px;" },
{ "#tabs a#resolucion span": "float:left;display:block; background:url('../images/tabright.gif') no-repeat right top; padding:5px 15px 4px 6px; background-position:100% -42px;" }
],{ duration: 0.6 }).play();
}
}
}
Effect.divSwap(element,container);//cambia el contenido de la página a medida que se seleccionan las solapas (funciona)
}

Por favor si alguien me puede ayudar con esto se lo agradecería.
La libreria es de scriptaculous.

Gracias.