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í: