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 -

[D_Z]

Hola de una manera sencilla y aprobechando la funcion mostrar que ya tienes

puedes poner a las imagenes un id y pasar por parmetro en el onclick el id de la imagen tambien algo asi:

Código:

<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;

y en la funcion igual que haces para ocultar las capas y luego mostrar una puedes poner todos los 'botones' con la imagen gris y poner la que corresponda con el boton azul

Código:

var capas = ["capa1", "capa2", "capa3", "capa4"];
var imagenes = ["imagen1", "imagen2", "imagen3", "imagen4"];
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 = "ruta imagen gris";
// y ahora mostramos la actual...
document.getElementById(capa).style.display = "block";
document.getElementById(imagen).src = "ruta imagen azul";
}

-->

bueno espero que te pueda servir...

[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

[D_Z]

Hola! el problema es que en tu funcion te faltan las llaves del for la de apertura y cierre... tiene que quedarte algo asi:

<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>

[susaninhax]

MUCHISISIISISISIMAS GRACIASS D_Z!!!!!!!!! ayyy que alegría, funcionaa!!!! que potito!!! te lo agradezco mucho, espero que a alguien le pueda servir igualmente este codigo, ya que me resulta bonito o que lo puedan mejorar a su antojo, graciass!!!

[mauuu_]

Muy bueno, como puedo hacer para al iniciar el html me muestre solo una de las opciones? gracias

[apocalypcis]

necesito ayuda con algo parecido a lo de mi compañero, quiero qe al parecer la paginas las imagenes en grande se oculten y sólo aparezca una por defecto y lo que pasa esque desde un principio me aparecen odas las imagenes de un jalón , es como una especie de seleccionar un color para cada imagen

[apocalypcis]

<script type="text/javascript" charset="utf-8">
<!--
var capas = ["capa1", "capa2", "capa3", "capa4", "capa5", "capa6", "capa7", "capa8", "capa9", "capa10"];
var imagenes = ["imagen1", "imagen2", "imagen3", "imagen4", "imagen5", "imagen6", "imagen7", "imagen8", "imagen9", "imagen10"];
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 = "";
// y ahora mostramos la actual...
document.getElementById(capa).style.display = "block";
document.getElementById(imagen).src = "";
}
}
-->
</script>

<!-- capas a mostrar -->
<div id="capa1"><img alt="" src="http://hmoutdoorgym.com/new/wp-content/uploads/2013/04/naranja.png" width="250" height="250"></div>
<div id="capa2"><img alt="" src="http://hmoutdoorgym.com/new/wp-content/uploads/2013/04/blanco.png" width="250" height="250"></div>
<div id="capa3"><img alt="" src="http://hmoutdoorgym.com/new/wp-content/uploads/2013/04/beige.png" width="250" height="250"></div>
<div id="capa4"><img alt="" src="http://hmoutdoorgym.com/new/wp-content/uploads/2013/04/azul.png" width="250" height="250"></div>
<div id="capa5"><img alt="" src="http://hmoutdoorgym.com/new/wp-content/uploads/2013/04/amarillo.png" width="250" height="250"></div>
<div id="capa6"><img alt="" src="http://hmoutdoorgym.com/new/wp-content/uploads/2013/04/verde.png" width="250" height="250"></div>
<div id="capa7"><img alt="" src="http://hmoutdoorgym.com/new/wp-content/uploads/2013/04/rojo.png" width="250" height="250"></div>
<div id="capa8"><img alt="" src="http://hmoutdoorgym.com/new/wp-content/uploads/2013/04/plata.png" width="250" height="250"></div>
<div id="capa9"><img alt="" src="http://hmoutdoorgym.com/new/wp-content/uploads/2013/04/oro.png" width="250" height="250"></div>
<div id="capa10"><img alt="" src="http://hmoutdoorgym.com/new/wp-content/uploads/2013/04/negro.png" width="250" height="250"></div>
<!-- botones -->

<div id="menu4" >
<span onclick="mostrar('capa1','imagen1')" style="cursor: pointer"><img id="imagen1" src="http://hmoutdoorgym.com/new/wp-content/uploads/2013/04/NARANJA.png" width="16" height="15" border="0" /></span> &nbsp;
<span onclick="mostrar('capa2','imagen2')" style="cursor: pointer"><img id="imagen2" src="http://hmoutdoorgym.com/new/wp-content/uploads/2013/04/BLANCO.png" width="16" height="15" border="0" /></span> &nbsp;
<span onclick="mostrar('capa3','imagen3')" style="cursor: pointer"><img id="imagen3" src="http://hmoutdoorgym.com/new/wp-content/uploads/2013/04/BEIGE.png" width="16" height="15" border="0" /></span> &nbsp;
<span onclick="mostrar('capa4','imagen4')" style="cursor: pointer"><img id="imagen4" src="http://hmoutdoorgym.com/new/wp-content/uploads/2013/04/AZUL.png" width="16" height="15" border="0" /></span> &nbsp;
<span onclick="mostrar('capa5','imagen5')" style="cursor: pointer"><img id="imagen5" src="http://hmoutdoorgym.com/new/wp-content/uploads/2013/04/AMARILLO.png" width="16" height="15" border="0" /></span> &nbsp;
<span onclick="mostrar('capa6','imagen6')" style="cursor: pointer"><img id="imagen6" src="http://hmoutdoorgym.com/new/wp-content/uploads/2013/04/VERDE.png" width="16" height="15" border="0" /></span> &nbsp;
<span onclick="mostrar('capa7','imagen7')" style="cursor: pointer"><img id="imagen7" src="http://hmoutdoorgym.com/new/wp-content/uploads/2013/04/ROJO.png" width="16" height="15" border="0" /></span> &nbsp;
<span onclick="mostrar('capa8','imagen8')" style="cursor: pointer"><img id="imagen8" src="http://hmoutdoorgym.com/new/wp-content/uploads/2013/04/PLATEADO.png" width="16" height="15" border="0" /></span> &nbsp;
<span onclick="mostrar('capa9','imagen9')" style="cursor: pointer"><img id="imagen9" src="http://hmoutdoorgym.com/new/wp-content/uploads/2013/04/ORO.png" width="16" height="15" border="0" /></span> &nbsp;
<span onclick="mostrar('capa10','imagen10')" style="cursor: pointer"><img id="imagen10" src="http://hmoutdoorgym.com/new/wp-content/uploads/2013/04/NEGRO.png" width="16" height="15" border="0" /></span> &nbsp;
</div>