Hoy les vengo a compartir como puedes cambiar una imagen con solo css. Esta tecnica te va a premitir modificar una imagen sin la necesidad de usar javascript, pero para comenzar, vamos a ver como comenzaremos con esta tecnica.
Hace tiempo atras tuve que revisar un sitio web de un cliente para solucionar los problemas relacionados con ADA Compliance. Dentro de una de las alarmas que el sistema visualizaba, estaba la de unas imagenes interactivas que cambian de imagen al pasar el mouse por encima. La alarma en cuestion: «Controlador de eventos dependiente del dispositivo(Device dependent event handler)».
Esta alarma de arriba significa que hay un controlador de eventos presente al que es posible que no se pueda acceder. Ahora, que significa esto y porque importa. Esto importa debido a que los eventos de JavaScript en uso no parecen ser accesibles tanto para los usuarios del mouse como del teclado. Para ser completamente accesible, la interacción crítica de JavaScript debe ser independiente del dispositivo.
Como se veria este problema en codigo. El codigo en cuestion va a ser este de abajo. Aqui puedes ver que la etiqueta <a> posee atributos onmouseover y onmouseout para ejecutar codigo javascript:
<a href="URL para usar en la imagen" onmouseover="nueva imagen url" onmouseout="imagen url original">
<img src="imagen url original" />
</a>Teniendo en cuenta este problema, y no tener la posibilidad de acceder al javascript del sitio, vamos a utilizar CSS para manejar estos eventos.
Como puedes cambiar la imagen con CSS
Para cambiar la imagen con solo CSS, puedes utilizar varias formas dependiendo de cual va a ser el cambio a usar al pasar el mouse por encima del vinculo o la imagen. Ahora, vamos a ver dos opciones, una para colorear y la otra para cambiar la imagen.
Como colorear la imagen con CSS
Si tenemos por ejemplo, una imagen que al pasar el mouse por encima, la imagen cambia de color solamente, y el codigo para hacerlo es similar al presentado mas arriba. Podemos entonces usar la opcion filter para poder crear la misma accion que antes poseia y asi eliminar la Alarma de accesibilidad web. Para ahacerlo, eliminaremos los atributos onmouseover y onmouseout y crearemos una clase o un id para acceder unicamente al vinculo, si es que ya no lo posee. Luego llamaremos a esta clase usando la accion :hover para cambiar la imagen.
Aqui esta este ejemplo, con la imagen a la izquierda y el codigo a la derecha:
<style>
#faqicon:hover img{
filter: hue-rotate(180deg);
}
</style>
<a href="URL para usar en la imagen" id="faqicon">
<img src="imagen url original" />
</a>Subscribete ahora para recibir las ultimas entradas.
Como cambiar la imagen con CSS
Ahora, vamos a usar otra configuracion sin usar filter para cambiar la imagen original por otra diferente. Esta forma nos permite cambiar imagenes con diseños complejos. En este caso, vamos a usa background, ademas de padding-left,y box-zising para cambiar la imagen. Usaremos background para establecer la nueva imagen al elemente img. Luego agregamso padding-left el cual agrega un espacio de relleno en píxeles en el lado izquierdo del elemento img. Esto esta destinado a dar espacio antes de que comience la imagen de fondo. Y al final, box-sizing: border-box; para establecer el modelo de caja. Esta ultima parte significa que el ancho total del elemento incluirá tanto el contenido como el espacio de relleno, pero no el margen ni el borde.
Al final el estilo que usaremos asegura que cuando el cursor se desplace sobre un enlace (a) que contiene una imagen (img), la imagen mostrará un ícono de fondo. Para mantener el tamaño de la imagen, podemos tomar dos formas:
- Podemos agregar
widthyheightal estilo y asi mantener el tamaño de la imagen usando estilos. - La otra opcion es de agregar
widthyheighta elemento imagen para asi mantener el tamaño de la imagen. Ejemplo debajo.
Aqui esta este ejemplo, con la imagen a la izquierda y el codigo a la derecha:
<style>
#faqicon:hover img{
background:url("url the la imagen") no-repeat;
padding-left: 130px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
</style>
<a href="URL para usar en la imagen" id="faqicon">
<img src="imagen url original" width="130px" height="123px" />
</a>En el caso de quieras cambiar contenidos difefrentes tal como un contenedor de texto (p) que cambia a una imagen al pasar el mouse por encima de texto, el estilo seria el mismo. Dependiendo del para donde quieres que la imagen y el texto se muevan, puedes modificar el padding, eligiendo entre top, left, bottom, right. Siempre manteniendo la misma cantidad de pixeles tanto en width como si hacemos el padding en el left o right. Tambien pueden hacer uso de overflow:hidden para ocultar todo lo que este fuera del recuadro de la imagen.