En unos minutos conseguiremos un bonito efecto rollover (la imagen cambia por otra cuando el ratón pasa por encima) para nuestras imágenes.
[1] Hemos de tener las dos imágenes del mismo tamaño subidas a un alojamiento de archivos, ya que necesitaremos sus direcciones (url).
[2] Accedemos a la página del generador en Creating online, pinchamos sobre el logo de la llave (open generator) y completamos los campos.
[3] En el primer campo hemos de colocar el enlace al que llevará nuestra imagen (opcional). En el segundo, la url de la imagen que se mostrará antes de pasar el ratón por encima, y en el tercero la imagen que veremos al pasar el ratón sobre la anterior. Fijaros que en todos los campos tenemos que ingresar las urls sin http://.
[4] Pinchamos en "Generate My Code", copiamos el código resultante y lo pegamos donde vamos a mostrar el efecto, una entrada o la sidebar, funciona en ambas sin problemas.
Tendremos en cuenta que el código no puede usarse más de una vez, es decir, no podemos pegar uno en la sidebar, y el mismo en una entrada, porque no funcionarían, pero si podemos volver a hacerlo cuantas veces queramos con distintas imágenes, he incluso usando las mismas pero con distinta url (volviendo a re-alojarlas).
Ejemplo:
0 comentarios:
Publicar un comentario