HTMLpointHTMLpoint HTMLpoint.com


 Filtros en las imágenes



Las hojas de estilo permiten evitar el uso de GIF animados mediante la inserción de sencillo código HTML. Los efectos que se obtienen gracias a los filtros son seis en total y todos se verifican cuando el ratón pasa por encima de la imagen:

Trasparency: la imagen se vuelve opaca hasta que el ratón no la toca devolviéndole la luminosidad original;

Blur: efecto desenfocado de la imagen hacia la izquierda

Light: efecto sombreado de la imagen de derecha a izquierda

Wave: efecto ondulado en la imagen

Flip horizontal: iimagen invertida hacia la izquierda

Flip vertical: imagen dada la vuelta

Para obtener los efectos de los filtros en la imagen es necesario intervenir en dos puntos del documento: dentro de la marca <HEAD> y en el SRC de la imagen.

Los ejemplos que siguen muestran el código que hay que impostar para los seis efectos citados.


Muestra el código HTML




Muestra el código HTML




Muestra el código HTML




Muestra el código HTML




Muestra el código HTML




Muestra el código HTML


A la imagen "paesaggio.jpg" se le asigna un nombre "immagine1" y un nivel de opacidad equivalente a 50. Por opaco se entiende lo que se vea la imagen en el momento de cargar la página. A niveles más bajos corresponde una imagen más desnfocada. El gestor de eventos "onmouseover" establece que en el momento en que el cursor del ratón entra en el área de imagen la misma se vuelve nítida; mientras el gestor "onmouseout" devuelve la imagen a su estado inicial cuando el cursor se mueve.

  Vuelve a principio de página