Ampliar imágenes con efecto onmouseover

Hace un tiempo habíamos visto cómo ampliar las imágenes, pero haciendo clik. Hoy veremos una forma muy sencilla de ampliar las imágenes con sólo pasar el mouse sobre la imagen.

Lo único que tendremos que hacer será pegar el siguiente código en la entrada cada vez que deseemos poner alguna imagen con este efecto. El código es el siguiente:

<img src="URL-IMAGEN" onmouseover="this.width=400;this.height=300;" onmouseout="this.width=200;this.height=150;" width="200" height="150" />

Explicación:

» "this.width=400;this.height=300;" es el ancho y alto que tendrá la imagen cuando se agrande.
» "this.width=200;this.height=150;" width="200" height="150" es el ancho y alto de la imagen reducida. Recordar que en este caso ambos width y height deben ser iguales.

Ejemplo:



Referencia : 86707359.at.webry