Agrandar imágenes al pasar el cursor

Vamos a enseñaros como podemos hacer que nuestras imágenes se agrandar al pasar el ratón.
Podemos insertarlo tanto en nuestra entrada en la sección HTML como en un gadget.
Para ello vamos a usar este código.

ver código 

- Copia este código.

<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="color: #7f6000;"><span style="font-size: x-large;"><span style="font-family: inherit;">Imágenes</span></span></span>

<img height="80" onmouseout="this.width=100;this.height=80;" onmouseover="this.width=300;this.height=300;" src="PNG" width="100" />

<img height="80" onmouseout="this.width=100;this.height=80;" onmouseover="this.width=300;this.height=300;" src="3.JPG" width="100" />

<img height="80" onmouseout="this.width=100;this.height=80;" onmouseover="this.width=300;this.height=300;" src="4.JPG" width="100" />

<img height="80" onmouseout="this.width=100;this.height=80;" onmouseover="this.width=300;this.height=300;" src="2.JPG" width="100" />

<img height="80" onmouseout="this.width=100;this.height=80;" onmouseover="this.width=300;this.height=300;" src=".JPG" width="100" />
</div>

Como vemos en la primera parte estamos usando el código onmouseout
 (al salir del ratón,)..
Estamos poniendo una anchura (widht) de 100 px; y una altura (height) de 80px.

En la segunda parte estamos usando el código onmouseover
 (por encima del ratón,)..
Estamos poniendo una anchura (widht) de 300 px; y una altura (height) de 300px.

Esto podemos modificar o a nuestras anchas.
En src=".JPG", es donde tenemos que insertar nuestra imagen.

Y ASÍ ES COMO QUEDARÍA