Expandir una Imagen Dinámicamente cuando se Sitúa el Cursor encima

Hoy día veremos cómo podemos utilizar un simple script de Dinamicdrive para expandir una imagen dinámicamente con solo pasar el mouse por encima. Si bien es cierto que también he escrito otros efectos para expandir imágenes como quizás les pueda interesar les dejo los enlaces Ampliar las Imágenes con Efecto Elegante con jQuery en Blogger y Imagen que se Agranda al Pasar el Mause por Encima.

Este script te permite visualizar imágenes de gran tamaño en un tamaño más reducido inicialmente y hacer que se expanda dinámicamente hasta llegar a su tamaño original cuando situamos el cursor sobre la imagen. Pueden verlo funcionando en mi blog de pruebas.

Para utilizar este script en tu blog, ve a Diseño > Edición de HTML > con la ayuda del buscador de tu navegador (Ctrl + F) busca la etiqueta </head> y justo antes el siguiente código perteneciente al script:

<script src='http://sites.google.com/site/pazosblogger/config/pagetemplates/script/expando.js' type='text/javascript'/>

Ya tenemos el script que animará el efecto en nuestra plantilla, ahora añadimos un poco de CSS antes del anterior código que acabamos de pegar antes de </head>:

<style type="text/css">

img.expando{
border: none;
vertical-align: top;
}

</style>

Ahora, tienes ve a Diseño > Añadir gadget > elije > HTML/Javascript y pegamos el siguiente código para llamar al efecto y al CSS:

<p>
<img class="expando" border="0" src="..URL/de/tu/imagen.png" width="100" height="75">
<img class="expando" border="0" src="..URL/de/tu/imagen.png" width="100" height="75">
<img class="expando" border="0" src="..URL/de/tu/imagen.png" width="100" height="75">
</p>

Cambia lo que está en color rojo por la dirección de tu imagen.
Lo que está en color verde son los valores que tendrá la imagen antes de ser ampliada, tu lo puedes cambiar esos valores a tu gusto (width= anchura y height= altura).
El script es recomendable que lo subas a tu propio servidor.

Descargar Script (Recomendado)