El lenguaje de programación Javascript es ampliamente conocido y utilizado en la comunidad de desarrolladores web, gracias a su versatilidad para manipular elementos del DOM (Document Object Model) de manera dinámica e interactiva. En esta entrada, abordaremos cómo podemos manipular imágenes de un sitio web con Javascript, especialmente, seleccionándolas y aplicándoles una clase a través de un evento de click, algo útil en numerosas situaciones, como cambios de estilo o animaciones.
Seleccionando la imagen
var imagen = document.getElementById('miImagen');
En este caso, con Javascript estamos seleccionando una imagen en particular que tiene asignado un id ‘miImagen’. Es importante tomar en consideración que, según la estructura de nuestro HTML, es posible que tengamos que cambiar la forma de seleccionar nuestra imagen, pudiéndose usar otros selectores como getElementsByClassName o querySelector si fuera necesario, para adaptar correctamente el script a nuestras necesidades.
Aplicando una clase con Javascript
imagen.addEventListener('click', function() {
this.className = 'nuevaClase';
});
Ahora, con este trozo de código, a nuestra imagen seleccionada le añadimos un escuchador de eventos que “escucha” el evento ‘click’. Cuando se produce el evento, es decir, cuando se hace click sobre la imagen, ejecutamos una función que cambia la clase de la imagen a ‘nuevaClase’. Tomemos nota aquí de que si la imagen ya disponía de una o varias clases asignadas, con este método las estaríamos sobrescribiendo.
Manteniendo las clases existentes
imagen.addEventListener('click', function() {
this.classList.add('nuevaClase');
});
Si quisiéramos mantener las clases que la imagen ya tuviera asignadas, la propiedad ‘classList’ y el método ‘add’ nos permiten añadir nuevas clases sin afectar a las existentes. Por lo tanto, al hacer click en la imagen, simplemente se añadirá ‘nuevaClase’ a la lista de clases del elemento sin eliminar las previas.
Posibles usos prácticos
Puede que te estés preguntando: ¿Y en qué situaciones podría serme útil esta técnica? Existen multitud de casos prácticos, sólo depende de tus necesidades. Podrías querer mostrar u ocultar una imagen cuando el usuario haga click en ella, o quizás quieras cambiar su apariencia, tamaño o posición a través de las propiedades de CSS vinculadas a la nueva clase, e incluso podrías querer aplicar una animación a la imagen cuando se haga click en ella. Las opciones son infinitas y solo tu imaginación pone los límites.