Ampliar imágenes al pasar el ratón


Estoy montando el blog de Abalire y, entre las cosas que queremos poner, está una galería de fotos en la que se muestran los distintos productos que ofrece - unos pendientes y broches de fieltro monísimos, por cierto -. Para ello, mi idea era una serie de fotografías en las que la imagen se ampliase al pasar el ratón por encima, para poder ver los detalles y que, además tuviesen un enlace al post concreto de ese producto.

La solución ha sido muy sencilla, un código HTML muy sencillito en la página de la galería aplicado a cada imagen y listo:

<a href="url del enlace al que dirige la imagen"><img src="url de la imagen" onmouseover="this.width=400;this.height=300;" onmouseout="this.width=100;this.height=80;" width="100" height="80" /></a>

Las medidas, width y height pueden cambiarse hasta lograr el tamaño deseado. Hay que tener en cuenta que las primeras, las que siguen a "onmouseover", es el tamaño de la imagen cuando pasas el cursor por encima, mientras que las otras se corresponden a la imagen normal.

El resultado sería algo así:






¡Comparte si te gusta!
ESCRITO POR Marina Montes

Periodista, apasionada de la web 2.0, intento de community manager. Bloguera, lectora y enganchada a las nuevas tecnologías. Un poco friki y un mucho geek.
Sígueme en Twitter | Facebook | Linkedin | Google+

No hay comentarios

No hay comentarios :

Publicar un comentario en la entrada

Valoro la aportación de nuevas informaciones y los enlaces con información relevante, pero no el spam. Todos los comentarios que no se atengan a esta norma serán eliminados.