[SOLUCIONADO] Menú para abrir imágenes

[Mappanare]

Hola!!!!

Estoy intentando crear un menú en el cual, en vez de direccionar a un link de la web, se abriera una imagen en un lugar concreto de la página. Otra imagen con otro de los botones del menú, y así sucesivamente.

Es posible?

Y si no es así, poder crear botones de imagen que, al pulsarlos, abran otra imagen en un lugar determinado de la página en cuestión...

Gracias por la ayuda y un saludo!!!!!

[Alexis88]

¿Las imágenes están ocultas en el documento o las piensas añadir? Si fuera lo primero, ¿están contenidas dentro del mismo elemento (un <div>, <section>, <article>, etc.) o están en diferentes contenedores?

[Mappanare]

Pues la verdad es que soy muy muy muy inexperta y lo único que tengo es un menú sencillo con links. Pensaba que sería fácil abrir una imagen desde ahí...

Cómo me recomiendas entonces que lo haga?

[Alexis88]

Un ejemplo sencillo (hay otras maneras de hacer esto):

Código HTML:

<nav id = "menu">
    <li>Imagen 1</li>
    <li>Imagen 2</li>
    <li>Imagen 3</li>
</nav>
    
<div id = "imagenes">
    <img src = "imagen1.jpg" class = "invisible" />
    <img src = "imagen2.jpg" class = "invisible" />
    <img src = "imagen3.jpg" class = "invisible" />
</div>
 

Código CSS:

#imagenes img{
    position: absolute;
}
 
.visible{
    opacity: 1;
}
 
.invisible{
    opacity: 0;
}
 

Código Javascript:

document.addEventListener("DOMContentLoaded", function(){
    var opciones = document.querySelectorAll("#menu li"),
        imagenes = document.querySelectorAll("#imagenes img"),
        numOpcion, actual;
    
    [].forEach.call(opciones, function(opcion){
        opcion.addEventListener("click", function(){
            numOpcion = [].indexOf.call(opciones, this);                        
            actual = document.querySelector(".visible") || null;
            
            if (actual){
                actual.className = "invisible";
            }
            
            imagenes[numOpcion].className = "visible";
        }, false);
    });
}, false);
 

Lo que hace esto es simple.

En un archivo HTML, tengo un menú con tres opciones y un contenedor con tres imágenes las cuales poseen la clase invisible. El objetivo es mostrar la imagen que corresponda a la opción seleccionada.

En un archivo CSS (este código también puede estar dentro del documento HTML, entre las etiquetas <style></style>), defino una posición absoluta para las imágenes del contenedor (para que se superpongan y ocupen todas el mismo espacio) y dos clases; invisible, que quitará la opacidad a las imágenes al punto de dejarlas invisibles, y visible, que les devolverá la opacidad.

En un archivo JS (este código también puede estar dentro del documento HTML, entre las etiquetas <script></script>), ejecuto una función luego de que haya cargado el documento. En dicha función, tomo al conjunto de opciones del menú y al conjunto de imágenes del contenedor y los almaceno en las variables opciones e imagenes, respectivamente. Enseguida, utilizo el método .forEach() para iterar sobre el conjunto de opciones (también puedes usar estructuras repetitivas como while o for) y, en cada iteración, delego una función por cada vez que el usuario dé un clic en cualquiera de las opciones. En esta función, tomo el número de orden que ocupa la opción pulsada dentro del menú (utilizando el método .indexOf()) y lo asigno a la variable numOpcion, esto con el fin de que se afecte a la imagen equivalente a la opción seleccionada. Luego, tomo a la imagen que posea la clase visible o el valor null si no hay una (como ocurrirá al inicio) y asigno cualquiera de ambos valores a la variable actual; seguidamente, evalúo a esta última variable y en caso de no ser nula (cuando evalúas a una variable en una condición sin compararla con otra variable o valor, se verifica que su valor sea verdadero (true) o que no sea nulo (null) o indefinido (undefined)), le asigno la clase invisible para volver a ocultarla. Esta condición es más útil la primera vez que se intenta mostrar una imagen ya que no hay imágenes con la clase visible pues todas están ocultas (a menos de que decidas mostrar una por defecto), con lo cual evitamos que se muestre el respectivo mensaje de error en consola si intentáramos asignar la clase invisible a un elemento que no existe.

Finalmente, asigno la clase visible a la imagen que corresponda con el número de opción seleccionada.

DEMO

Suponiendo que el código CSS estuviera en un archivo de nombre estilos.css y el código JavaScript en un archivo de nombre script.js, el documento HTML debería de quedar así: (Leer nota más abajo)

Código HTML:

<!DOCTYPE html>
<html lang = "es">
<head>
    <meta charset = "utf-8" />
    <title>Ejemplo</title>
    <link rel = "stylesheet" type = "text/css" href = "estilos.css" />
    <script type = "text/javascript" src = "script.js"></script>
</head>
<body>
    <nav id = "menu">
        <li>Imagen 1</li>
        <li>Imagen 2</li>
        <li>Imagen 3</li>
    </nav>
    
    <div id = "imagenes">
        <img src = "imagen1.jpg" class = "invisible" />
        <img src = "imagen2.jpg" class = "invisible" />
        <img src = "imagen3.jpg" class = "invisible" />
    </div>
</body>
</html>
 

NOTA: Los tres archivos (CSS, JS y HTML) deberán de estar al mismo nivel (en el mismo directorio (carpeta) y no dentro de otro(s)), caso contrario, tendrás que añadir la ruta relativa de cada archivo, por ejemplo, si el archivo CSS está dentro de una carpeta llamada Mis estilos y esta está en la misma carpeta en la que está el archivo HTML, entonces, en el atributo href de la etiqueta <link>, deberás de colocar el valor Mis estilos/estilos.css.

Saludos

[Mappanare]

Hola!!!

Muchas gracias Alexis88 por tu tutorial. La verdad es que es muy bueno!!

Si yo tuviera más nociones, seguro que avanzaría más, pero ya ves que tan sólo me estoy iniciando... Y esto de ser autodidacta, cada vez me cuesta más...

El problema está en que estoy introduciendo los scripts en BK7. Así, no me deja añadir carpetas ni archivos. Tengo que introducir un único script con toda la información. He intentado introducir tu código que, en la demo es genial, pero cuando yo lo pongo en mi web me salen todas las imágenes debajo del menú escrito, y no me deja hacer clic en las letras del menú...

Seguramente hay algo que estoy poniendo mal... porque además de eso, toda la información CSS me sale escrita en la web. Creo que sólo admite JS...

Ayuda, please?????

Y muchas gracias de nuevo!!!!!

[Alexis88]

La verdad, no sé qué será BK7. No sé cómo habrás reacomodado tu código, pero podría tratarse de los estilos que estás aplicando los que generan que las imágenes salgan en esa posición.

Muéstranos el código actualizado y, por favor, utiliza el highlight respectivo.



Saludos

[Mappanare]

Hola!!

Ya dije que no tengo nada de experiencia. Estoy intentando añadir cosas, cambiando el orden de otras, y todo para que no me funcione nada...

En realidad lo que estaba buscando hacer es lo siguiente: algo como lo que reproduce el siguiente script, pero que en vez de ampliar la imagen, lo que haga es que la pequeña sea una imagen que, cuando le hagas click, la grande sea otra. Por ejemplo, la imagen 1 sea un número 1 y se abra la primera imagen que hay cargada. Y así sucesivamente. Y todo esto centrado en la página.

Código Javascript:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>
      Galería
    </title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
      //<![CDATA[
      function galeria(x){
        document.ampliar.src=x.src;
      }
      //]]>
    </script>
  </head>
  <body>
    <p>
      <img src="
http://files.123inventatuweb.com/acens8631/image/doc050515-001.jpg
" alt="MÓDULOS BAJOS" width="60" height="60" onclick="galeria(this);"/>
      <img src="
http://files.123inventatuweb.com/acens8631/image/modeloficha.jpg
" alt="MÓDULOS ALTOS" width="60" height="60" onclick="galeria(this);" />
      <img src="
http://files.123inventatuweb.com/acens8631/image/68796dc99c3746c392b757947552c512.jpg
" alt="MÓDULOS COLUMNA" width="60" height="60" onclick="galeria(this);" />
      <br />
      <br />
      <img src="
http://files.123inventatuweb.com/acens8631/image/doc050515-001.jpg
" alt="" width="1000" height="600" name="ampliar" />
    </p>
  </body>
</html>
 

Es muy difícil para alguien sin experiencia??

Muchísimas gracias, de verdad.

[Alexis88]

El decir "no tengo experiencia" no es excusa para no buscar la manera de resolver los problemas, en especial en esta era en la que prácticamente todo está a un clic. Si todos nos excusáramos de esa manera para no hacer algo, no verías nada de lo que ya se ha logrado en las diversas áreas del conocimiento humano. No lo vuelvas a hacer, eso es de mediocres y no creo que lo seas.

Con respecto al script que presentas, si deseas mostrar una imagen asociada a la que se va a pulsar, puedes guardarla en un atributo personalizado, algo así:

Código HTML:

<img src = "imagen_inicial1.jpg" data-asociada = "imagen_asociada1.jpg" />
 

Y para mostrarla con el script que presentas, solo cambiarías la instrucción de la función por esta:

Código Javascript:

document.ampliar.src = x.getAttribute("data-asociada");
 

Y si pretender usar esto en navegadores modernos, puedes hacerlo así:

Código Javascript:

document.ampliar.src = x.dataset.asociada;
 

Saludos

[Mappanare]

Muchísimas gracias Alexis88!!

Perdona por haber tardado tanto en responder. Es un trabajo que voy haciendo a ratos y hasta hoy no había podido entrar a ver el tema.

Con eso de no ser mediocre me has tocado la fibra! Jajaja! De hecho, me ofrecí a hacer la web de la empresa donde trabajo porque era un reto para mi. Luego encontré dificultades que poco a poco he ido resolviendo... Pero el trabajo que un profesional hace en un rato, yo llevo meses para hacerlo!

Ahora es exactamente como quería! Te estoy muy agradecida, de verdad.

Saludos!!!