En la ficha de producto de algunas tiendas online es común ver una galería de imágenes que tiene una imagen destacada de tamaño mayor y unas cuantas de tamaño menor justo por debajo o en el lateral.
Cuando se pasa el ratón por encima de las imágenes de tamaño menor la imagen cambia.
En la publicación de hoy vamos a reproducir este efecto sin Javascript.
Es importante que tengas en cuenta que este escrito tiene un enfoque académico y no comercial.
El código podría mejorarse mucho pero es un embrión que permite repasar conceptos importantes como
- Asignación de eventos a un nodo html
- Modificación del css mediante JS.
- Identificación de nodos html.
El código html y css
La idea es encerrar dentro de un contenedor principal de 600px de ancho y 550px de alto uno de dimensiones 600 px de ancho por 400 de ancho y 4 de dimensiones 150 px de ancho por 150px de alto.
Para que se apilen unos al lado de otro usamos la propiedad float.
Y finalmente damos un border a todos los contenedores para diferenciarlos.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ficha producto - imágenes</title>
<meta name="author" content="francesc ricart">
<style>
*{box-sizing:border-box;}
div{
float:left;
}
.contenedor-producto{
width:600px;
height:550px;
margin:auto;
}
.imagen-principal{
width:100%;
height:400px;
border:1px solid #ff0000;
}
[class *= "subImagen-"]{
width:25%;
height:150px;
border:1px solid #0000ff;
}
</style>
</head>
<body>
<div class="contenedor-producto">
<div class="imagen-principal"></div>
<div class="subImagen-1"></div>
<div class="subImagen-2"></div>
<div class="subImagen-3"></div>
<div class="subImagen-4"></div>
</div>
</body>
</html>
El siguiente paso es implementar los fondos de cada uno de los contenedores mediante la propiedadbackground-image.
Usaremos para ello un poco de javascript.
El código javascript
El código JS presentado está pensado para alguien que está aprendiendo. Se puede mejorar con conceptos más avanzados como el uso del this o incluso haciendo uso de jQuery. Sin embargo en este ejemplo nos abstenemos.
La idea de fondo es crear dos arrays con todas las imágenes que se usarán.
Uno para las imágenes de 150px por 150px.
Otro para las imágenes de 600px por 400px.
A continuación se inician todos los contenedores asignando un background-image.
Finalmente se asigna un evento a cada uno de los contenedores pequeños. Cuando se pasa el ratón por encima (eventoonmouseevent) se dispara una función.
Se ha escrito una función para cada pequeño contenedor. Todas hacen lo mismo: substituir el background-image de la imagen principal.
var zFondos150 = ["url('foto1-150.jpg')","url('foto2-150.jpg')","url('foto3-150.jpg')","url('foto4-150.jpg')"];
var zFondos600 = ["url('foto1-600.jpg')","url('foto2-600.jpg')","url('foto3-600.jpg')","url('foto4-600.jpg')"];
var imagenPrincipal = document.querySelectorAll(".imagen-principal")[0];
var subImagenes = document.querySelectorAll('[class *= "subImagen-"]');
imagenPrincipal.style.backgroundImage =zFondos600[0];
subImagenes[0].style.backgroundImage =zFondos150[0];
subImagenes[1].style.backgroundImage =zFondos150[1];
subImagenes[2].style.backgroundImage =zFondos150[2];
subImagenes[3].style.backgroundImage =zFondos150[3];
subImagenes[0].addEventListener("mouseover",accion0);
subImagenes[1].addEventListener("mouseover",accion1);
subImagenes[2].addEventListener("mouseover",accion2);
subImagenes[3].addEventListener("mouseover",accion3);
function accion0(){imagenPrincipal.style.backgroundImage =zFondos600[0];}
function accion1(){imagenPrincipal.style.backgroundImage =zFondos600[1];}
function accion2(){imagenPrincipal.style.backgroundImage =zFondos600[2];}
function accion3(){imagenPrincipal.style.backgroundImage =zFondos600[3];}En el siguiente gif se muestra el efecto conseguido.
¡Hola!
Querido lector,
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
Deja una respuesta