Tutorial para cambiar de imagen con ratón

Esta entrada no tiene nada que ver con la fotografía, o bueno, algo sí, porque es un modo de mostrar para aprender... El caso es que como desde que introduje la modificación para ver la imagen sin procesamiento alguno al pasar el cursor del ratón por encima algunos de vosotros ha mostrado cierto interés en conocer cómo se hace pues he decidido hacer esta especie de tutorial para que quien lo desee sepa cómo hacerlo.

Antes de comenzar con el tutorial propiamente dicho, tengo que decir que no es un método automático, es decir, que no es un simple botoncito como el que se usa para meter imágenes cuando estamos creando nuestras entradas desde blogger, sino que requiere de cierta participación del 'redactor' aunque no es muy complicado...

En fin, lo primero que hay que hacer es subir las dos imágenes a blogger normalmente, es decir, como metemos normalmente nuestas imágenes, de este modo tendremos accesibles las rutas hacia las miniaturas de las mismas que es lo que necesitamos para hacer el cambio. Entonces, si tenemos activada la edición de la entrada en HTML tendremos algo parecido a lo que se ve en la siguiente imagen:


El texto que está 'enrojecido' son las rutas a las miniaturas. Ahora lo que tenemos que hacer es escribir las órdenes de control de eventos de ratón en una de esas dos entradas de imagen. Yo normalmente me quedo con la procesada, así, la visión por defecto de la miniatura es la de la imagen procesada. En la siguiente imagen se ve de nuevo enrojecido todo lo que he añadido en una de las dos entradas de imagen, básicamente son las órdenes OnMouseOver="this.src=''" y OnMouseOut="this.src=''" donde a cada una les añado la ruta a la miniatura correspondiente.


Pues bien, eso es todo, una vez incluida esas órdenes, la imagen cambiará cuando se pase el ratón por encima ;-) como se ve en esta que sigue....


Esta vez no iba a ser menos, y para ver la imagen más grande sólo tienes que hacer clic en la misma. Por cierto, el efecto animado de imagen a tamaño completo se hace con otro artilugio en javascript, si tenéis interés, puedo hacer un tutorial tan malo como este ;-).