Un ejemplo sencillo (hay otras maneras de hacer esto):
Código HTML:
Ver original
<img src = "imagen1.jpg" class = "invisible" /> <img src = "imagen2.jpg" class = "invisible" /> <img src = "imagen3.jpg" class = "invisible" />
Código CSS:
Ver original#imagenes img{
position: absolute;
}
.visible{
opacity: 1;
}
.invisible{
opacity: 0;
}
Código Javascript
:
Ver originaldocument.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:
Ver original<!DOCTYPE html>
<meta charset = "utf-8" /> <link rel = "stylesheet" type = "text/css" href = "estilos.css" /> <script type = "text/javascript" src = "script.js"></script>
<img src = "imagen1.jpg" class = "invisible" /> <img src = "imagen2.jpg" class = "invisible" /> <img src = "imagen3.jpg" class = "invisible" />
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