cambiar una imagen de una capa al hacer click en otra imagen

[susaninhax]

Buenas compañeros;

Acudo a vosotros porque el javascript lo llevo fatal!! Necesito hacer una especie de menú, el cual ya he hecho gracias a leer mucho en el foro, el cual funcione del siguiente modo.

Tengo 4 capas con contenido. Y en otra capa, tengo 4 imagenes a modo de botones. Si pincho en la imagen 1, me muestra la capa 1, si pincho en la imagen 2, me muestra la capa 2. Hasta ahí todo claro. Pues bien. La imagen que uso para mostrar una capa u otra, es un botoncito que inicialmente está gris. Si pincho en la imagen 2 (botoncito gris) me muestra la capa 2, debiendose quedar la imagen 2(botoncito gris) de color azul, y las otras en gris. si pincho en el boton 3, se muestra la capa 3, y el boton debe pasar a ser azul, y el boton 2 a gris. como si estubiera encendido y el resto apagados. No sé si me he explicado bien... El cambio de capas me funcionan sin problemas, pero el cambio de imagen, NO TENGO NI WARRI de como se hace...

Alguien podría echarme un cable con esto??????? porfavor!!!

Os adjunto el codigo para que veais como lo tengo montado:
Script

Código HTML:

<script type="text/javascript" charset="utf-8">
<!--
var capas = ["capa1", "capa2", "capa3", "capa4"];
function mostrar(capa) {
// primero ocultamos todas...
for (var i = 0, total = capas.length; i < total; i ++)
document.getElementById(capas[i]).style.display = "none";
// y ahora mostramos la actual...
document.getElementById(capa).style.display = "block";
}
-->
</script> 

HTML

Código HTML:

<!--  capas a mostrar -->

<div id="capa1"> hola capa 1</div>
<div id="capa2"> hola capa 2</div>
<div id="capa3"> hola capa 3</div>
<div id="capa4"> hola capa 4</div>

<!-- botones -->

<div id="menu4" > 
        	<span onclick="mostrar('capa1')" style="cursor: pointer">
<img src="img/fondos_contenido/submenu_on.png" width="16" height="15" border="0" /></span> &nbsp; 
        	<span onclick="mostrar('capa2')" style="cursor: pointer"><img src="img/fondos_contenido/submenu_off.png" width="16" height="15" border="0" /></span> &nbsp;  
       		<span onclick="mostrar('capa3')" style="cursor: pointer"><img src="img/fondos_contenido/submenu_off.png" width="16" height="15" border="0" /></span> &nbsp; 
        	<span onclick="mostrar('capa4')" style="cursor: pointer"><img src="img/fondos_contenido/submenu_off.png" width="16" height="15" border="0" /></span> &nbsp; 
        </div> 

Gracias de antemano!! - susaninhax -