Foros del Web » Programando para Internet » Javascript »

Mostrar Conjunto de Imagenes

 Estas en el tema de Mostrar Conjunto de Imagenes en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 10/05/2015, 14:35
 
Fecha de Ingreso: octubre-2013
Mensajes: 22
Antigüedad: 12 años
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>
  #2 (permalink)  
Antiguo 10/05/2015, 23:06
Avatar de caricatos
Moderador
  
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 23 años, 6 meses
Puntos: 1284
Respuesta: Mostrar Conjunto de Imagenes
Hola:

El atributo id no debe repetirse... el que te podría valer es el atributo name, y el selector sería getElementsByName.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 17/05/2015, 08:29
 
Fecha de Ingreso: octubre-2013
Mensajes: 22
Antigüedad: 12 años
Puntos: 1
Respuesta: Mostrar Conjunto de Imagenes
no me funciono, le cambie

los ID de las imagenes por name
Código HTML: 
Ver original
  1. <img class="oculto" id="Modular" src="Imagenes/Productos/Modular6_small.jpg" alt="Modular6" width="162" height="120"/>
por
Código HTML: 
Ver original
  1. <img class="oculto" name="Modular" src="Imagenes/Productos/Modular4_small.jpg" alt="Modular4" width="162" height="120"/>

y la funcion


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>

X
Código Javascript: 
Ver original
  1. <script>
  2.         nameImagenVisible="Rack";
  3.         nameImagenVisible="Modular";
  4.         function mostrar(name)
  5.         {
  6.             // esconedemos la imagen visible
  7.             document.getElementsByName(nameImagenVisible).style.display="none";
  8.             // mostramos la imagen seleccionada
  9.             document.getElementsByName(name).style.display="block";
  10.             // guardamos en la variable la imagen que estamos visualizando
  11.             nameImagenVisible=name;
  12.         }
  13.     </script>

Pero ahora no me muestra ninguna imagen al hacer click en el menu....
  #4 (permalink)  
Antiguo 17/05/2015, 08:53
 
Fecha de Ingreso: octubre-2013
Mensajes: 22
Antigüedad: 12 años
Puntos: 1
Respuesta: Mostrar Conjunto de Imagenes
Tambien probre esta funcion pero tampoco me funciono...

Código Javascript: 
Ver original
  1. <script>
  2.         claseImagenVisible="Modular";
  3.         claseImagenVisible="Rack";
  4.         window.onload = function mostrar(clase){
  5.             var clases = document.getElementsByClassName("clase");
  6.             for (x = 0; x < clases.length; x++)
  7.             {
  8.              document.getElementsByClassName(claseImagenVisible).style.display="none";
  9.              document.getElementsByClassName(clase).style.display="block";
  10.             claseImagenVisible=clase;
  11.             }
  12.             }
  13.  
  14.         
  15.         </script>

T_T HELP:!!
  #5 (permalink)  
Antiguo 17/05/2015, 11:08
Avatar de Alexis88
Philosopher
  
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 13 años, 11 meses
Puntos: 977
Respuesta: Mostrar Conjunto de Imagenes
Una práctica manera de hacer lo que buscas usando clases, es aplicando una determinada clase al elemento que se desea mostrar y quitársela al elemento que actualmente la posee, para lo cual lo buscaré mediante dicha clase.

En este pequeño ejemplo, hago uso de la delegación de eventos y así no tener que utilizar un bucle para aplicar el evento a cada opción.

Código HTML: 
Ver original
  1. <ul>
  2.     <li>Opción 1</li>
  3.     <li>Opción 2</li>
  4.     <li>Opción 3</li>
  5. </ul>
  6. <div id = "contenedor">
  7.     <img src = "imagen1.jpg" class = "noVisible" />
  8.     <img src = "imagen2.jpg" class = "noVisible" />
  9.     <img src = "imagen3.jpg" class = "noVisible" />
  10. </div>

Código CSS: 
Ver original
  1. .noVisible{
  2.     display: none;
  3. }
  4.  
  5. .visible{
  6.     display: block;
  7. }

Código Javascript: 
Ver original
  1. var ul = document.querySelector("ul"),
  2.     ulLi = ul.querySelectorAll("li"),
  3.     img = document.querySelectorAll("#contenedor img"),
  4.     elem, pos, vis;
  5.  
  6. ul.addEventListener("click", function(event){
  7.     elem = event.target;
  8.     if (elem.tagName == "LI"){
  9.         pos = [].indexOf.call(ulLi, elem);
  10.         vis = document.querySelector(".visible") || null;
  11.         if (vis){
  12.             vis.className = "noVisible";
  13.         }
  14.         img[pos].className = "visible";
  15.     }
  16. }, false);

DEMO

Primero, tomo a la lista desordenada, al conjunto de opciones que este posee y al conjunto de imágenes del contenedor, además, declaro tres variables que usaré más adelante.

Cuando se produzca el evento click en la lista desordenada, ejecuto una función en la cual almaceno en una de las tres variables finales al elemento que acaba de ser pulsado, luego, verifico si se trata de una opción de la lista; de ser así, tomo la posición que ocupa dentro de ella (empezando a contar desde cero), luego, tomo al elemento que posea la clase visible y la asigno a otra de las variables o le asigno null si no hay (que es lo que ocurrirá la primera vez puesto que no se ven las imágenes al inicio). Enseguida, verifico si se logró encontrar algún elemento que posea dicha clase y, de ser así, se la cambio por la clase noVisible, con lo que queda oculta nuevamente. Finalmente, asigno la clase visible a la imagen cuya posición sea equivalente a la opción seleccionada.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

― Ayn Rand
  #6 (permalink)  
Antiguo 17/05/2015, 14:33
 
Fecha de Ingreso: octubre-2013
Mensajes: 22
Antigüedad: 12 años
Puntos: 1
Respuesta: Mostrar Conjunto de Imagenes
Hola Alexis88, gracias por contribuir, no entendi mucho tu ejemplo,tengo grupos de imagenes, por ejemplo: 4 img de plantas, 3 de autos, 5 de motos, etc. y lo que necesito es que al hacer click en la opcion "Plantas", solo se muestren las plantas y se oculten los autos y las motos, o al hacer click en autos se oculte el resto y solo se vean autos, asi para cada ocpcion, con tu ejemplo se puede o solo me muestra de a UNA sola iamgen dependiendo de la posicion que le de la opcion seleccionada?

PD: intente porbarlo y adaptarlo a mi codigo pero o no me funciono o no lo hice bien, es que esto de js aun estoy aprendiendo de a poco
  #7 (permalink)  
Antiguo 17/05/2015, 14:58
Avatar de Alexis88
Philosopher
  
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 13 años, 11 meses
Puntos: 977
Respuesta: Mostrar Conjunto de Imagenes
Igual te sirve. En lugar de mostrar/ocultar imágenes, lo harás con los grupos de imágenes. Lo único que tendrías que hacer es ocultar los grupos en lugar de las imágenes y aplicarles las clases para mostrar y ocultar. Ya no tendrías que tomar a las imágenes sino a los grupos.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

― Ayn Rand
  #8 (permalink)  
Antiguo 01/06/2015, 17:50
 
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>

Etiquetas: conjunto, html, imagenes, js
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


« Tema Anterior | Próximo Tema »


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