jueves, 23 de mayo de 2013

Cómo hacer que cambie la foto a antes y después al pasar el ratón por encima.

Lo único que debemos tener en cuenta es que:
1) Las fotos las vamos a usar en tamaño original, por lo que no deberían ser más anchas que nuestra columna central (si ponemos de 640 de ancho como mucho, sabemos que acertamos, que es la medida para fotos Extra-grande de Blogger).
2) Las dos fotos (la del antes y la del después) es preferible que sean del mismo tamaño para que el efecto quede mejor.


 
 Ahora, cómo conseguir ese efecto en que cambia una imagen de antes a después cuando le pasamos el ratón por encima: 
 ✎ En cuanto tengamos las fotos, lo único que deberemos hacer es, en donde queramos que se vean en el post, poner en HTML:

<img onmouseout="this.src='URL de la imagen antes';" onmouseover="this.src='URL de la imagen después';" src="URL de la imagen antes" />

Puedes usarlo para hacer un menú o poner el antes y después:

 

 ¡Y eso es todo! 
 Si no sabeis cual es el URL de una imagen tenemos un tutorial justo después de esta entrada. 

Manuel Carrasco Verdugo 2ºBTO.B
Raquel Vargas Menacho    2ºBTO.A

No hay comentarios:

Publicar un comentario