Fascina a tus lectores con las imágenes dobles, que cambian cuando les pasas el cursor por encima

27.1.16

combinar imagenes cursor

No nos vamos a engañar. Comprar online es muy práctico.

Puede que hayas visto que en algunas tiendas online, cuando pasas el cursor por encima de la foto del producto, te aparece otra foto.

¿Lo has visto nunca?

Estoy segura que sabes a qué me refiero. A lo mejor lo has visto en otro lugar.

Y si no lo has visto... agárrate porqué lo que viene hoy es fantástico.

Aquí abajo tienes un ejemplo de lo que serás capaz de hacer cuando termines de leer el post. Pásale el cursor por encima y mira lo que ocurre con la imagen que ves.





Ideas para utilizar este tipo de imágenes combinadas

Da igual cuál sea el tema de tu blog. Seguro que encuentras una buena excusa para utilizarlas!

Las imágenes de este tipo dan dinamismo al blog y no es un recurso muy explotado.

No quiere decir que a partir de ahora tengas que poner todas tus fotos de tu blog así, pero puedes pensar en qué casos te ayudaría a atraer público o a alegrar  la cara de tus visitas.

Se me ocurren unos cuantos casos en los que a mi, como clienta/lectora, me gustaría ver este tipo de imágenes que cambian cuando les pasas el cursor por encima:

  • en un tutorial DIY. En un lado puedes ver el resultado y en el otro los materiales necesarios.

  • en la venta de un producto. Por un lado el producto que se vende y por el otro un detalle del producto o el precio.

  • en una receta de cocina. Por un lado la foto del plato  terminado y por el otro los ingredientes o algún paso de la elaboración.

  • un post de antes/después de transformación de algo (ya sea reciclar algo, remodelar una habitación...). Por un lado como era antes y por el otro el resultado final.

  • un tutorial de tratamiento de imágenes. Por un lado la foto final y por el otra la foto inicial antes de ser retocada.

  • en la reseña de un libro. Por un lado la portada del libro y por el otro el título y el autor, o el precio o una breve reseña.

  • para hacer un concurso. Por un lado lo que ganan y por el otro un texto animando a participar.

  • en la recomendación de locales, actividades, restaurantes,... Por un lado la foto del local (o lo que sea que recomiendes) y por el otro lado la dirección.

Ya ves que hay muchos casos en los que puedes sacar partido a este tipo de fotos combinadas. Sólo hace falta que lo adaptes a las necesidades de tu blog.


Además las  puedes utilizar en distintos sitios:

  • en un post cualquiera de tu blog.

  • en la barra lateral para promocionar algo o simplemente anunciar o decorar.

  • en la newsletter.

  • en la tienda de tu blog, para vender artículos.



Cosas a tener en cuenta

A pesar de los ejemplos que he citado antes, debes pensar que siempre debes tener dos imágenes de la misma talla. En los casos de los textos también deben ser imágenes, no puedes añadir texto directamente en el código.

A parte de poner las dos imágenes también tienes la posibilidad de añadir un link, así cuando pinchen encima de una de las imágenes, serán conducidos a otra página que tu quieras.



Lo que debes hacer para crear estas imágenes

Primero de todo deberás crear las dos imágenes con algún programa o web que te permita tratar imágenes digitalmente.

Puedes utilizar Photoshop, Gimp, PicMonkey, Fotor, Canva,...

Simplemente, cuando quieras añadir una imagen que cambie cuando le pasas el cursor por encima, tendrás que añadir el siguiente código.



  <a href="URL_del_link">

   <img height="ALTO_imagen" width="ANCHO_imagen"
     src="URL_imagen_sin_cursor"
     onmouseout="this.src='URL_imagen_sin_cursor'"                
     onmouseover="this.src='URL_imagen_con_cursor'"
   />
  </a>



Del código anterior tienes que personalizar cinco parámetros:

  • URL_del_link --> En caso de que quieras que si pinchan en la imagen les redireccione a otro link, es aquí donde tienes que añadir la URL en cuestión.

    Si sólo quieres mostrar las dos imágenes debes borrar esta línea entera y también la última línea del código, </a>

  • ALTO_imagen --> es la altura de la imagen en píxeles, pero sólo debes poner el número, SIN px.

  • ANCHO_imagen --> es el ancho de la imagen en píxeles, pero sólo debes poner el número, SIN px.

  • URL_imagen_sin_cursor --> es la URL de la primera imagen que verán tus lectores, antes de pasar el cursor por encima de ella.

  • URL_imagen_con_cursor --> es la URL de la segunda imagen, la que verán cuando se le pase el cursor por encima.


Es un cambio sencillo pero que sorprender.

Consiguirás recoger mucha información en poco espacio y de manera original.

¿Conocías este tipo de  combinación de imágenes? ¿Lo has utilizado en tu blog? ¿Se te ocurre otra utilidad que le podrías dar a la combinación de imágenes, en tu blog? Si lo pones en práctica, déjame el link en los comentarios y lo miraré encantada!

Nos leemos en los comentarios.

Laura


¿Te ha servido lo que has leído?
Muchas gracias por compartirlo en tus redes sociales!
Tus contactos y yo te lo agradeceremos! :-)

¿Quieres contenido exclusivo para mejorar tu blog?
Suscríbete y recibirás AHORA la guía para dominar Blogger HOY!
Tu blog no pasará inadvertido.
Dejará huella.