Haga clic o coloque el cursor sobre la imagen para ampliar en HTML
- Cambiar el tamaño de la imagen HTML al pasar el mouse
- Use HTML y JavaScript para agrandar la imagen cuando el usuario hace clic en la imagen
Este artículo nos enseñará a ampliar la imagen HTML cuando los usuarios hacen clic o se desplazan sobre una imagen en particular.
Como usuario de la galería de imágenes, habrá visto la interfaz de usuario donde residen varias imágenes y cuando pasa el cursor sobre una sola imagen, se amplía. Aprenderemos diferentes métodos en este artículo para ampliar imágenes al pasar el cursor por encima o al hacer clic.
Cambiar el tamaño de la imagen HTML al pasar el mouse
Podemos ampliar una imagen en particular usando HTML y CSS cuando el usuario se desplaza sobre eso. En el siguiente ejemplo, hemos creado cinco elementos img con diferentes valores del atributo src.
Aquí, los usuarios pueden ver que todas las imágenes se mostrarán en línea en la misma fila.
También hemos utilizado estilos CSS para establecer la altura y el ancho de cada elemento de la imagen. Hemos asignado una altura y un ancho de 200 px para cada elemento.
También hemos establecido un margen de 10 px para cada elemento img para dejar espacio alrededor de la imagen.
Usamos la propiedad : hover de CSS para agregar el efecto de desplazamiento. Dentro del bloque img: hover de CSS, hemos establecido una altura y un ancho de 400 px para el elemento de la imagen, lo que significa que cada vez que los usuarios pasen el mouse sobre la imagen, se escalará en 2x.
Código de ejemplo:
<img src="https://pbs.twimg.com/profile_images/959568688654553089/PuZWi9tj_400x400.jpg"/>
<img src="/img/DelftStack/logo.png"/>
<img src="https://pbs.twimg.com/profile_images/959568688654553089/PuZWi9tj_400x400.jpg"/>
<img src="/img/DelftStack/logo.png"/>
<img src="/img/DelftStack/logo.png"/>
img {
height: 200px;
width: 200px;
margin: 10px;
}
img:hover{
height: 400px;
width: 400px;
}
En el resultado anterior, los usuarios pueden ver que cuando pasamos el mouse sobre cualquier imagen, el tamaño de esa imagen aumenta.
Además, podemos usar la propiedad CSS transform para agrandar la imagen HTML. La propiedad transform nos permite transformar cualquier elemento HTML y una imagen es uno de ellos.
Significa que podemos escalar, rotar, trasladar, etc., con la imagen. Aquí, aplicaremos la escala en la imagen para ampliarla.
En el siguiente código de ejemplo, hemos agregado el estilo CSS transform: scale(2) dentro del bloque img:hover. Multiplicará la altura y el ancho de la imagen por 2 cuando el usuario se desplace sobre la imagen en particular.
La transformada: escala(multifactor) toma el único parámetro llamado multifactor. Así, aumenta el tamaño del elemento por multifactor.
En nuestro caso, hemos utilizado el 2 como valor de multifactor, por lo que ampliará la imagen 2x.
Código de ejemplo:
img:hover{
transform:scale(2);
}
Use HTML y JavaScript para agrandar la imagen cuando el usuario hace clic en la imagen
Podemos usar HTML y JavaScript para ampliar la imagen cuando el usuario hace clic en la imagen. En este ejemplo, hemos creado cinco imágenes HTML y hemos asignado “alto” y “ancho” a cada elemento img como atributo.
En JavaScript, hemos accedido a todos los elementos img por el nombre de la etiqueta, que se almacena dentro de la variable images. Después de eso, iteramos a través de la matriz de imágenes y agregamos el método addEventListener a cada imagen.
El método addEventListner toma dos argumentos; el primer argumento es un tipo de evento y el otro es la función de devolución de llamada. Aquí, hemos utilizado el evento clic como primer argumento, por lo que la función de devolución de llamada se ejecutará cada vez que los usuarios hagan clic en cualquier elemento de la imagen.
Podemos cambiar el estilo del elemento img usando la propiedad element.style. Aquí, hemos utilizado la propiedad image[i].style.transfrom en JavaScript para aplicar la propiedad transform de CSS al elemento de imagen.
Dentro de la función de devolución de llamada, estamos iterando a través de la matriz de imágenes para cambiar el tamaño de las otras imágenes, excepto la imagen en la que se hizo clic. A continuación, cambiaremos el estilo transformar a escala (1.3) para el elemento en el que se hizo clic.
Además, hemos agregado un margen al elemento en el que se hizo clic para que se vea mejor usando JavaScript.
Código de ejemplo:
<img src="https://pbs.twimg.com/profile_images/959568688654553089/PuZWi9tj_400x400.jpg" height="200px" width="200px"/>
<img src="/img/DelftStack/logo.png" height="200px" width="200px"/>
<img src="https://pbs.twimg.com/profile_images/959568688654553089/PuZWi9tj_400x400.jpg" height="200px" width="200px"/>
<img src="/img/DelftStack/logo.png" height="200px" width="200px"/>
<img src="/img/DelftStack/logo.png" height="200px" width="200px"/>
var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
images[i].addEventListener('click', function() {
for (var j = 0; j < images.length; j++) {
if (i != j) {
images[j].style.transform = 'scale(1)';
}
}
this.style.transform = 'scale(1.3)';
this.style.margin = '40px'
});
}
Producción:
En el resultado anterior, los usuarios pueden observar que cuando hacemos clic en la imagen, se amplía y otras imágenes cambian de tamaño a su tamaño original. Además, no hay ningún efecto cuando pasamos el cursor sobre la imagen.
Hemos aprendido tres métodos diferentes para ampliar imágenes en este artículo. Los primeros dos métodos usan la propiedad CSS : hover y el tercero usa el método JavaScript addEventListener.
