Anteriormente vimos cómo agrandar una imagen al pasar el mouse sobre ella, para ello agregamos unos estilos a la plantilla y un pequeño código en la entrada. Esta vez haremos el mismo efecto de ampliar la imagen pero con un código mucho más sencillo y corto.
Este es el ejemplo:
Tan sólo debes usar el siguiente código dentro de tus entradas:
<img src="URL de la imagen" onmouseover="this.width=400;this.height=300;" onmouseout="this.width=100;this.height=80;" width="100" height="80" />
- Sólo debes cambiar la URL de la imagen (en su tamaño normal)
- El primer width y height son las medidas a las que se va agrandar la imagen al pasar el cursor, width es el ancho y height es el alto.
- Los width y height que están en color verde son el ancho y alto de la imagen en tamaño pequeño, es decir, el thmbnail.
Categories:
Efectos
