Tema: Mostrar Conjunto de Imagenes
Ver Mensaje Individual
  #8 (permalink)  
Antiguo 01/06/2015, 17:50
DarkSoquet
 
Fecha de Ingreso: octubre-2013
Mensajes: 22
Antigüedad: 12 años
Puntos: 1
Respuesta: Mostrar Conjunto de Imagenes
perdon por retomar tan tarde, es que no logre dar con los ejemplo y concejos que me daban, y al final logre hacerlo de otra manera, no tan optima pero funciona CASI como yo queria =D, digo casi porque puedo mostrar las imagenes y ocultarlas por grupos, el problema esta en que para ocultar todas y que me muestre 1 solo grupo primero debo hacer click en cada uno de los grupos para ocultarlos, les dejo el codigo haber si me tiran un cable....
PD: no me reten....=P

Código HTML: 
Ver original
  1. <li><a href="Productos.html">PRODUCTOS</a>
  2.                         <ul>
  3.                              <li><a href="#"onclick="mostrar('Rack')">Racks</a></li>
  4.                              <li><a href="#"onclick="mostrar('Bahuits')">Bahiuts</a></li>
  5.                              <li><a href="#"onclick="mostrar('Roperos')">Roperos</a></li>
  6.                              <li><a href="#"onclick="mostrar('Modular')">Modulares</a></li>
  7.                              <li><a href="#"onclick="mostrar('Juego')">Juego de Dormitorio</a></li>
  8.                              <li><a href="#"onclick="mostrar('Bajo')">Bajo Mesadas y Alacenas</a></li>
  9.                              <li><a href="#"onclick="mostrar('Botineros')">Botineros y Mesas Ratonas</a></li>
  10.                          </ul>
  11.                     </li>
  12.  
  13. <div id="container" class="container">
  14.             <div id="Rack">
  15.             <img  src="Imagenes/Productos/Rack TV_small.jpg" alt="Rack TV" width="162" height="120"/>
  16.             <img  src="Imagenes/Productos/Rack TV2_small.jpg" alt="Rack TV2" width="162" height="120"/>
  17.             </div>
  18.             <div id="Bahuits">
  19.             <img  src="Imagenes/Productos/Bahuits1_small.jpg" alt="Bahuits1" width="162" height="120"/>
  20.             <img  src="Imagenes/Productos/Bahuits2_small.jpg" alt="Bahuits2" width="162" height="120"/>
  21.             <img  src="Imagenes/Productos/Bahuits3_small.jpg" alt="Bahuits3" width="162" height="120"/>
  22.             </div>
  23.             <div id="Roperos">
  24.             <img src="Imagenes/Productos/ropero_small.jpg" alt="Ropero" width="162" height="120"/>
  25.             <img src="Imagenes/Productos/ropero2_small.jpg" alt="Ropero2" width="162" height="120"/>
  26.             </div>
  27.             <div id="Modular">
  28.             <img src="Imagenes/Productos/Modular1_small.jpg" alt="Modular1" width="162" height="120"/>
  29.             <img src="Imagenes/Productos/Modular2_small.jpg" alt="Modular2" width="162" height="120"/>
  30.             <img src="Imagenes/Productos/Modular3_small.jpg" alt="Modular3" width="162" height="120"/>
  31.             <img src="Imagenes/Productos/Modular4_small.jpg" alt="Modular4" width="162" height="120"/>
  32.             <img src="Imagenes/Productos/Modular5_small.jpg" alt="Modular5" width="162" height="120"/>
  33.             <img src="Imagenes/Productos/Modular6_small.jpg" alt="Modular6" width="162" height="120"/>
  34.             <img src="Imagenes/Productos/Modular7_small.jpg" alt="Modular7" width="162" height="120"/>
  35.             <img src="Imagenes/Productos/Modular8_small.jpg" alt="Modular8" width="162" height="120"/>
  36.             <img src="Imagenes/Productos/Modular9_small.jpg" alt="Modular9" width="162" height="120"/>
  37.             <img src="Imagenes/Productos/Modular10_small.jpg" alt="Modular10" width="162" height="120"/>
  38.             <img src="Imagenes/Productos/Modular11_small.jpg" alt="Modular11" width="162" height="120"/>
  39.             <img src="Imagenes/Productos/Modular12_small.jpg" alt="Modular12" width="162" height="120"/>
  40.             <img src="Imagenes/Productos/Modular13_small.jpg" alt="Modular13" width="162" height="120"/>
  41.             <img src="Imagenes/Productos/Modular14_small.jpg" alt="Modular14" width="162" height="120"/>
  42.             <img src="Imagenes/Productos/Modular15_small.jpg" alt="Modular15" width="162" height="120"/>
  43.             <img src="Imagenes/Productos/Modular16_small.jpg" alt="Modular16" width="162" height="120"/>
  44.             <img src="Imagenes/Productos/Modular17_small.jpg" alt="Modular17" width="162" height="120"/>
  45.             <img src="Imagenes/Productos/Modular18_small.jpg" alt="Modular18" width="162" height="120"/>
  46.             </div>
  47.             <div id="Juego">
  48.             <img src="Imagenes/Productos/Juegodedormitorio_small.jpg" alt="Juegodedormitorio" width="162" height="120"/>
  49.             </div>
  50.             <div id="Bajo">
  51.             <img src="Imagenes/Productos/Bajo Mesada_small.jpg" alt="Bajo Mesada" width="162" height="120"/>
  52.             </div>
  53.             <div id="Botineros">
  54.             <img src="Imagenes/Productos/botinero_small.jpg" alt="botinero" width="162" height="120"/>
  55.             </div>
  56.         </div>

Código Javascript: 
Ver original
  1. <script>
  2.         idImagenVisible="Rack";
  3.         idImagenVisible="Bahuits";
  4.         idImagenVisible="Roperos";
  5.         idImagenVisible="Modular";
  6.         idImagenVisible="Juego";
  7.         idImagenVisible="Bajo";
  8.         idImagenVisible="Botineros";
  9.         
  10.         function mostrar(id)
  11.         {
  12.             // esconedemos la imagen visible
  13.             document.getElementById(idImagenVisible).style.display="none";
  14.             // mostramos la imagen seleccionada
  15.             document.getElementById(id).style.display="block";
  16.             // guardamos en la variable la imagen que estamos visualizando
  17.             idImagenVisible=id;
  18.         }
  19.     </script>