Imagen que se Agranda al Pasar el Mause por Encima

Hoy día veremos un truco que nos permite agrandar las imágenes que ponemos en la sidebar o en una entrada, con solo  pasar el mause por encima de la imagen.

Este efecto se llama onmauseover, y lo podemos usar en aquellas imágenes que a la vista quieres que se vean pequeñas, pero si el usuario o visitante pasa el mause por encima la imagen se ampliará en un tamaño mayor, también puedes configurar el tamaño de la que quieres ampliar con este efecto.

 Para poner este efecto a una imagen copia el siguiente código:


<img src="http://img34.imageshack.us/img34/7003/bannerpazosblogger.png" onmouseover="this.width=500;this.height=400;" onmouseout="this.width=150;this.height=100;" width="150" height="100" />



Lo que está en rojo cámbialo por la URL de tu imagen.
Para cambiar el ancho y alto de la imagen que se ampliará, cambia lo que está en verde.
Si lo que deseas es cambiar el ancho y alto de la imagen reducida, cambia lo que está en azul, pero en este caso fíjate que tanto width como heigt tienes que ser iguales en los dos fragmento de código.

Ejemplo:



Vía | Diyva