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

[susaninhax]

Gracias D_Z, la idea es esa, pero se me queda parado!! te adjunto el codigo por si he metido la pata en algo, pero lo he revisado y juraría que nop

Código HTML:

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



<!--  capas a mostrar -->

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

<!-- botones -->

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

el caso es que en el momento en el que le doy al segundo boton, desaparece el contenido, y no cambia las imagenes, le doy a un tercer boton, o al anterior y sigue igual, no hace nada, se queda como bloqueado