Ver Mensaje Individual
  #8 (permalink)  
Antiguo 26/04/2013, 10:58
apocalypcis
 
Fecha de Ingreso: abril-2013
Mensajes: 2
Antigüedad: 11 años
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>