Foros del Web » Programando para Internet » Javascript »

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

Estas en el tema de cambiar una imagen de una capa al hacer click en otra imagen en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 14/07/2010, 03:51
Avatar de susaninhax  
Fecha de Ingreso: noviembre-2004
Mensajes: 358
Antigüedad: 20 años
Puntos: 3
cambiar una imagen de una capa al hacer click en otra imagen

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 -
  #2 (permalink)  
Antiguo 14/07/2010, 04:04
D_Z
 
Fecha de Ingreso: enero-2008
Mensajes: 22
Antigüedad: 16 años, 11 meses
Puntos: 0
Respuesta: cambiar una imagen de una capa al hacer click en otra imagen

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...
  #3 (permalink)  
Antiguo 14/07/2010, 04:45
Avatar de susaninhax  
Fecha de Ingreso: noviembre-2004
Mensajes: 358
Antigüedad: 20 años
Puntos: 3
Respuesta: cambiar una imagen de una capa al hacer click en otra imagen

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

Última edición por susaninhax; 14/07/2010 a las 04:50
  #4 (permalink)  
Antiguo 14/07/2010, 05:24
D_Z
 
Fecha de Ingreso: enero-2008
Mensajes: 22
Antigüedad: 16 años, 11 meses
Puntos: 0
Respuesta: cambiar una imagen de una capa al hacer click en otra imagen

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>
  #5 (permalink)  
Antiguo 16/07/2010, 06:44
Avatar de susaninhax  
Fecha de Ingreso: noviembre-2004
Mensajes: 358
Antigüedad: 20 años
Puntos: 3
Respuesta: cambiar una imagen de una capa al hacer click en otra imagen

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!!!
  #6 (permalink)  
Antiguo 16/01/2013, 11:44
Avatar de mauuu_  
Fecha de Ingreso: marzo-2009
Mensajes: 10
Antigüedad: 15 años, 9 meses
Puntos: 1
Respuesta: cambiar una imagen de una capa al hacer click en otra imagen

Muy bueno, como puedo hacer para al iniciar el html me muestre solo una de las opciones? gracias
  #7 (permalink)  
Antiguo 26/04/2013, 10:57
 
Fecha de Ingreso: abril-2013
Mensajes: 2
Antigüedad: 11 años, 7 meses
Puntos: 0
Respuesta: cambiar una imagen de una capa al hacer click en otra imagen

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
  #8 (permalink)  
Antiguo 26/04/2013, 10:58
 
Fecha de Ingreso: abril-2013
Mensajes: 2
Antigüedad: 11 años, 7 meses
Puntos: 0
Respuesta: cambiar una imagen de una capa al hacer click en otra imagen

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

Etiquetas: capas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 2 personas




La zona horaria es GMT -6. Ahora son las 15:29.