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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigWQ8tZS4EXiPcL29apxXoZAxosbdNXdqgLVYTSH8kkbj15rex8WAHMFSmvsOIJNCE3M0nB6c6urFCvPLdkHiKM640XvekyWk3VfmFKL4Q8Mjqp2yinDWAN5KVNQ8BTeX9O76T3AtwGqjC/"
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigWQ8tZS4EXiPcL29apxXoZAxosbdNXdqgLVYTSH8kkbj15rex8WAHMFSmvsOIJNCE3M0nB6c6urFCvPLdkHiKM640XvekyWk3VfmFKL4Q8Mjqp2yinDWAN5KVNQ8BTeX9O76T3AtwGqjC/" 
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigWQ8tZS4EXiPcL29apxXoZAxosbdNXdqgLVYTSH8kkbj15rex8WAHMFSmvsOIJNCE3M0nB6c6urFCvPLdkHiKM640XvekyWk3VfmFKL4Q8Mjqp2yinDWAN5KVNQ8BTeX9O76T3AtwGqjC/s400/capricornio.exe" 
onmouseover="javascript:this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij-PGoWNKbZ9GpPQAwK6grSQ5Q6JNjNZbUVJVRN3WiaIa7_mwyDKt8z1OoVNAVx67BTOxYm5J88NdjfEplazt0mPOuxPLliwYd34dQ33rd3DL7v_Ix0OPMVjrYhL4vLnDWVmVDVpMf5FqT/s400/mini-coche-solar.exe';" 
onmouseout="javascript:this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigWQ8tZS4EXiPcL29apxXoZAxosbdNXdqgLVYTSH8kkbj15rex8WAHMFSmvsOIJNCE3M0nB6c6urFCvPLdkHiKM640XvekyWk3VfmFKL4Q8Mjqp2yinDWAN5KVNQ8BTeX9O76T3AtwGqjC/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.