Tema: Mostrar Conjunto de Imagenes
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 10/05/2015, 14:35
DarkSoquet
 
Fecha de Ingreso: octubre-2013
Mensajes: 22
Antigüedad: 11 años, 1 mes
Puntos: 1
Mostrar Conjunto de Imagenes
Pues tengo un "Catalogo de Productos" en donde quiero a travez de un menu mostrar distintos productos y que el resto permanezca oculto, el problema es que el codigo que tengo me muestra solo 1(una) imagen y las otras de ese tipo me las deja ocultas
os dejo el codigo para ver si me ayudan con alguna solucion, ya que no soy muy avispado con JavaScript

Codigo JS para mostrar y ocultar las imagenes.
Código Javascript: 
Ver original
  1. <script>
  2.         idImagenVisible="Rack";
  3.         idImagenVisible="Modular";
  4.         function mostrar(id)
  5.         {          
  6.             document.getElementById(idImagenVisible).style.display="none";
  7.             document.getElementById(id).style.display="block";
  8.             idImagenVisible=id;
  9.         }
  10. </script>

Menu

Código HTML: 
Ver original
  1. <ul><!--menu-->
  2.                     <li><a href="index.html">EMPRESA</a></li>
  3.                     <li><a href="Productos.html">PRODUCTOS</a>
  4.                         <ul>
  5.                              <li><a href="#" onclick="mostrar('Rack')">Racks</a></li>
  6.                              <li><a href="#" onclick="mostrar('Bahiuts')">Bahiuts</a></li>
  7.                              <li><a href="#" onclick="mostrar('Roperos')">Roperos</a></li>
  8.                              <li><a href="#" onclick="mostrar('Modular')">Modulares</a></li>
  9.                              <li><a href="#" onclick="mostrar('Juego ')">Juego de Dormitorio</a></li>
  10.                              <li><a href="#" onclick="mostrar('BMesadas ')">Bajo Mesadas y Alacenas</a></li>
  11.                              <li><a href="#" onclick="mostrar('Botineros ')">Botineros y Mesas Ratonas</a></li>
  12.                          </ul>
  13.                     </li>
  14.                     <li><a href="contacto.html" >CONTACTOS</a></li>
  15.                     <li><a href="Catalogo.pdf" target="_blank">CATALOGO</a></li>
  16.                 </ul>

el Div con las imagenes que quiero mostrar

Código HTML: 
Ver original
  1. <div id="container">
  2.             <img class="oculto" id="Rack"  src="Imagenes/Productos/Rack TV_small.jpg" alt="Rack TV" width="162" height="120"/>
  3.             <img class="oculto" id="Rack" src="Imagenes/Productos/Rack TV2_small.jpg" alt="Rack TV2" width="162" height="120"/>
  4.             <img class="oculto" id="Bahuits" src="Imagenes/Productos/Bahuits1_small.jpg" alt="Bahuits1" width="162" height="120"/>
  5.             <img class="oculto" id="Bahuits" src="Imagenes/Productos/Bahuits2_small.jpg" alt="Bahuits2" width="162" height="120"/>
  6.             <img class="oculto" id="Bahuits" src="Imagenes/Productos/Bahuits3_small.jpg" alt="Bahuits3" width="162" height="120"/>
  7.             <img class="oculto" id="Ropero" src="Imagenes/Productos/ropero_small.jpg" alt="Ropero" width="162" height="120"/>
  8.             <img class="oculto" id="Ropero" src="Imagenes/Productos/ropero2_small.jpg" alt="Ropero2" width="162" height="120"/>
  9.             <img class="oculto" id="Modular" src="Imagenes/Productos/Modular1_small.jpg" alt="Modular1" width="162" height="120"/>
  10.             <img class="oculto" id="Modular" src="Imagenes/Productos/Modular2_small.jpg" alt="Modular2" width="162" height="120"/>
  11.             <img class="oculto" id="Modular" src="Imagenes/Productos/Modular3_small.jpg" alt="Modular3" width="162" height="120"/>
  12.             <img class="oculto" id="Modular" src="Imagenes/Productos/Modular4_small.jpg" alt="Modular4" width="162" height="120"/>
  13.             <img class="oculto" id="Modular" src="Imagenes/Productos/Modular5_small.jpg" alt="Modular5" width="162" height="120"/>
  14.             <img class="oculto" id="Modular" src="Imagenes/Productos/Modular6_small.jpg" alt="Modular6" width="162" height="120"/>
  15.             <img class="oculto" id="Modular" src="Imagenes/Productos/Modular7_small.jpg" alt="Modular7" width="162" height="120"/>
  16.             <img class="oculto" id="Modular" src="Imagenes/Productos/Modular8_small.jpg" alt="Modular8" width="162" height="120"/>
  17.             <img class="oculto" id="Modular" src="Imagenes/Productos/Modular9_small.jpg" alt="Modular9" width="162" height="120"/>
  18.             <img class="oculto" id="Modular" src="Imagenes/Productos/Modular10_small.jpg" alt="Modular10" width="162" height="120"/>
  19.             <img class="oculto" id="Modular" src="Imagenes/Productos/Modular11_small.jpg" alt="Modular11" width="162" height="120"/>
  20.             <img class="oculto" id="Modular" src="Imagenes/Productos/Modular12_small.jpg" alt="Modular12" width="162" height="120"/>
  21.             <img class="oculto" id="Modular" src="Imagenes/Productos/Modular13_small.jpg" alt="Modular13" width="162" height="120"/>
  22.             <img class="oculto" id="Modular" src="Imagenes/Productos/Modular14_small.jpg" alt="Modular14" width="162" height="120"/>
  23.             <img class="oculto" id="Modular" src="Imagenes/Productos/Modular15_small.jpg" alt="Modular15" width="162" height="120"/>
  24.             <img class="oculto" id="Modular" src="Imagenes/Productos/Modular16_small.jpg" alt="Modular16" width="162" height="120"/>
  25.             <img class="oculto" id="Modular" src="Imagenes/Productos/Modular17_small.jpg" alt="Modular17" width="162" height="120"/>
  26.             <img class="oculto" id="Modular" src="Imagenes/Productos/Modular18_small.jpg" alt="Modular18" width="162" height="120"/>
  27.             <img class="oculto" id="Juego" src="Imagenes/Productos/Juegodedormitorio_small.jpg" alt="Juegodedormitorio" width="162" height="120"/>
  28.             <img class="oculto" id="Bmesada" src="Imagenes/Productos/Bajo Mesada_small.jpg" alt="Bajo Mesada" width="162" height="120"/>
  29.             <img class="oculto" id="Botiner" src="Imagenes/Productos/botinero_small.jpg" alt="botinero" width="162" height="120"/>
  30.         </div>