Ampliar imágenes con mouse y Javascript

Un efecto bastante útil para aquellos donde el espacio es muy reducido o quieren aprovechar el espacio al máximo. Puedes hacer que al paso del mouse se abra otra imagen o cambie de tamaño, también se puede que al hacer un clic se amplíe o cambie de imagen y al hacer dos clics se reduzca o cambie por la imagen inicial.

Puedes usarlo como te des a entender incluso puede ser un menú, con dos imágenes y unos links, CSS y queda el menú, es un decir. puede ser lo que creas mejor para tu sitio.

[1] Solo añade el código donde lo quieras utilizar. Algunos ejemplos con sus respectivos códigos.

Con un clic, aumenta de tamaño y con dos se reduce.

<img 
src="http://1.bp.blogspot.com/_6CFlQEBRtLc/SJVCYAsdImI/AAAAAAAAAlM/6_LwTFMYCbQ/capricornio.exe"
width="50" 
onclick="javascript:this.height=100;this.width=100" 
ondblclick="javascript:this.width=50;this.height=50"/> 

El texto en color:
rojo es la url de la imagen.
azul es el ancho y alto de la imagen reducida.
verde es el ancho y alto de la imagen original.

Al pasar el mouse se agranda la imagen

<img 
src="http://1.bp.blogspot.com/_6CFlQEBRtLc/SJVCYAsdImI/AAAAAAAAAlM/6_LwTFMYCbQ/capricornio.exe" 
width="20" 
onmouseover="javascript:this.height=49;this.width=49" 
onmouseout="javascript:this.width=20;this.height=20"/>

El texto en color:
rojo es la url de la imagen.
azul es el ancho y alto de la imagen reducida.
verde es el ancho y alto de la imagen original.

Al pasar el mouse se abre otra imagen. Que tal puedes ver el mini choche, es solar y a solo 13 Euros Increible!

<img 
src="http://1.bp.blogspot.com/_6CFlQEBRtLc/SJVCYAsdImI/AAAAAAAAAlM/6_LwTFMYCbQ/s400/capricornio.exe" 
onmouseover="javascript:this.src='http://4.bp.blogspot.com/_6CFlQEBRtLc/SJVtaEhIxPI/AAAAAAAAAmM/gcOathWoB3s/s400/mini-coche-solar.exe';" 
onmouseout="javascript:this.src='http://1.bp.blogspot.com/_6CFlQEBRtLc/SJVCYAsdImI/AAAAAAAAAlM/6_LwTFMYCbQ/s400/capricornio.exe';"/>

El texto en color:
rojo es la url de la primer imagen.
azul es la url de la segunda imagen.

/!\ Las imágenes que estoy utilizando estan alojadas en blogger, pero puedes alojarlas donde quieras. Y de cualquier tamaño.

---

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

---