El qué, el para qué sirve el mapeo de imágenes y cómo aplicarlo

Cartel mapeo



Imagino que no habéis olvidado que os prometí en mi última entrada, sobre freebies de redes sociales, explicar en qué consistía el mapeo de imágenes, y sobre todo, cómo ponerlo en práctica. Pues aquí me tenéis cumpliendo mi palabra. ¡Ojo! mis indicaciones en cuanto a incorporar el código a nuestro blog sólo son válidas para Blogger. Nunca he trabajado con la plataforma WordPress y desconozco cómo se incorporan este tipo de elementos a la plantilla.

En fin, dicho esto, sólo me queda, si os parece, contar lo poquito que sé del asunto. Conste que el descubrimiento de esta herramienta la hice por casualidad, hace unos días en el interesante y completísimo blog: MISS LAVANDA.  Un sitio en que he aprendido millones de cosas. EDITO a fecha de 28/02/2017 [Muy a mi pesar retiro el enlace, pues desde hace meses ese blog está inactivo. Una verdadera pena. ¡Ojalá a Laura no le haya sucedido nada malo!, porque lo sentiría de veras].


MAPEAR IMAGEN: Esta herramienta nos permite enlazar parte de una imagen a una dirección web. Ventajas: 
  1. En un mismo gadget podemos enlazar a varios sitios distintos.
  2. Esto redunda en hacer más rápida la carga de nuestra página.
  3. En menos espacio tenemos varios gadgets.

Resulta de lo más útil para, tal y como os he mencionado en la tabla, reducir el tiempo de carga de nuestra página y unificar en un mismo gadget varios. Sirvan como ejemplo las siguientes imágenes de mi propio blog. Creo que así lo apreciaréis mejor. Inicialmente, tenía un gadget de imagen para cada uno de estos sitios. Por un lado estaba la imagen que derivaba hacia el blog de mis queridas 3flowers, luego otro para ir al blog de Blanca, y una última para dirigir al blog de YoyScrap. Obviamente, si con el tiempo vamos incorporando más y más gadgets a nuestra página, lo único que lograremos será que cada vez se ralentice más y estaremos impidiendo que posibles visitantes decidan quedarse. Así que es una herramienta de lo más útil, incluso para crear una barra de menús jur jur (lo digo porque la mía está hecha así.  Ya os explicaré en otra ocasión cómo procedí para crear la imagen. Por ahora, os muestro otros gadgets en que la he aplicado con éxito. Ambos en mi sidebar.


EDITO  a fecha de 28/02/2017: [Os muestro bajo estas líneas la barra de navegación a la que hago referencia, pues ha habido cambios en mi blog  desde que redacté esta entrada, y esa barra no existe actualmente. Incorporo también bajo esa barra, un gadget que diseñé con esta técnica que os explico].

Barra de navegación personalizada con mapeo

Gadget sobre mí con mapeo

Aquí os muestro por fin las imágenes a las que he hecho referencia antes: blog de 3 Flowers, el de B. Balzola, etc... Primeramente con un editor reuní los tres logos y como la misión era la de que cada logo llevase a una dirección distinta, lo que hice fue valerme de esta poderosa herramienta online llamada mapeo.

3 banners de sitios externos en uno




Banderiens verdes y rosas 


Habéis visto las imágenes precedentes, ¿verdad? Seguro que a estas alturas del post ya comprendéis el verdadero alcance de esta información y asoma a vuestras caras una sonrisilla traviesa. ¡Me alegro! Ahora empieza, no obstante, la labor en sí de mapear la imagen. Y estaos tranquilos, porque os garantizo que es de lo más sencillo. No hace falta descargarse ningún programa extraño. Se hace todo on-line, y tampoco se precisa registro alguno, aunque si queréis lo podéis hacer, desde luego. El proceso sería el siguiente:

  • Creais la imagen que queréis mapear o la seleccionais de entre las que ya tenéis.
  • Vais a la web de Image Map Tool: www.image-maps.com
  • Subís el archivo de vuestra imagen clickando en el recuadro que dice: "Browse for File".


Captura 1


Yo simularé que lo estoy haciendo con la imagen de mis redes sociales que tengo tenía por aquel entonces, en la sidebar. En pantalla os saldrá algo similar a esto. Clickais en el enlace donde pone "click to continue".






Captura 2 en Image Maps


Nos derivan a una nueva pantalla como ésta. No os preocupéis por el aviso que sale en amarillo.
  • Marcad la opción "close" que hay en él y desaparecerá.



Captura 3 en Image Maps

  • Pulsad el botón derecho del ratón y os saldrá un nuevo menú. Prestad mucha atención a los siguientes pasos.

Captura menú de imagen
  • Tenéis que seleccionar la primera opción del menú. La de "Create Rect"



  •  Nos volvemos hacia nuestra imagen y veremos que el cursor ya no es la típica flecha, sino que se ha convertido en una cruz. Colocadla sobre una de las figuras que componen vuestra imagen y proceded como si estuvierais subrayando un texto, cubriendo bien el área que os interesa.

Primera selección en Image Map


  • Y tranquilos que de la nueva ventana de menús sólo usaremos las dos primeras pestañas: "Options" y "Events" (siempre me surge la duda, de si al ser palabras extranjeras también se aplica la norma de "y" delante de palabra que no comience por "i" o "y", dada la pronunciación real de este vocablo en inglés). Bueno... yo y mis divagaciones... Me centro je je: en la primera línea (la de Map Url), en la tercera imagen la he puesto subrayada en amarillo, hemos de poner la dirección a la que queremos derivar a quien clicke en esa parte de la imagen. En mi caso a mi perfil de facebook. 
  • A continuación vamos a la segunda de las pestañas "Events" y ponemos "blank" en la primera línea también. Una vez hecho esto en los botones de la parte inferior de esta ventana marcamos "Save"
Procedemos a "subrayar" cada área de nuestra imagen original, la que queremos mapear, repitiendo estas mismas operaciones cuantas veces sea preciso. En mi caso serían cuatro: Facebook, Twitter, Pinterest e Instagram. Comprobaréis que cada vez que termináis este proceso con un área, ésta queda marcada con un rectángulo rojo. No olvidéis marcar "blank" en la primera línea de la segunda pestaña. Y luego al "Save".

Dirección para mapear


Options



  •  Cuando hayáis hecho esto en cada "subimagen" de vuestra imagen (no sé cómo llamarlas). Os quedará algo parecido a lo que me queda a mí:

Selección completa en rojo




Ahora es el momento cumbre... Redoble de tambores...


  • Nuevamente recurriremos a ese primer cuadro de diálogo, y escogeremos obviamente la de "Get Code". Si hubiérais creado vuestra propia cuenta podríais seleccionar "Save Map", aunque ni crear la cuenta ni esta segunda alternativa  son necesarias.


Primer diálogo de imagen

Código para mapear


  •  Nos saldrá un nuevo menú, tal y como os indico en esta imagen. La segunda pestaña es la que nos interesa. Pues será donde obtengamos el ansiado código HTML que habremos de incorporar a nuestro blog, y no os precocupéis, es un único artilugio y no desesperéis, lo tenéis abajo del todo en la pantalla. Tendréis que usar el scroll derecho de la pantalla de vuestro ordenador para poder verlo. Lo subrayais y copiáis en vuestro portapapeles y luego es muy sencillo. El propio código incorpora la imagen tal cual la habéis subido, así que basta con seleccionar la opción de HTML/Javascript que nos presenta Blogger entre su diversidad de gadgets "predefinidos" y añadimos la secuencia que hemos obtenido en esta web.

Última ventana para obtención del código


HTML para mapeo





Y ya tendréis la secuencia del código para vuestro gadget. Seguro que la sensación es maravillosa cuando comprobéis que funciona correctamente y que en una sola imagen habéis reducido el espacio de varios de vuestros gadgets. Todo un truco, ¿verdad? Pues si os ha gustado, no olvidéis compartirlo y dejad un maravilloso comentario o haceros seguidores.

Por cierto, ¿qué tal si ponéis en práctica todo esto e incorporáis en vuestra sidebar el banner a los desafíos de este sitio? Aunque, si os soy sincera, lo que de verdad me haría ilusión sería que decidieseis participar, en ese primer desafío, claro (desde . Recordad que tenéis hasta el 31 de enero a las 23:55 para presentar vuestro proyecto adaptando la propuesta del tutorial.

Decidáis lo que decidáis al respecto, por mi parte, yo os espero nuevamente por aquí a las 10:30, hora peninsular, el próximo miércoles día 14 de enero. Ese día os hablaré de dos interesantes lecturas que todo Blogger debería conocer. Y si preferís enteraros de todo, cómodamente al abrir vuestro correo, no dudéis en suscribiros. Elijais la forma que elijais para estar informados sobre lo que voy contando en este desván, me tendréis esperandoos aquí con una gran sonrisa de agradecimiento. Un abrazo.
Image and video hosting by TinyPic


12 comentarios

  1. Muchas gracias por tu visita y comentario en mi blog. Me doy una vuelta por el tuyo para conocer tus trabajos. Me parece estupendo tu lema. Abrazos desde Tenerife

    ResponderEliminar
    Respuestas
    1. Gracias a ti, Ligia, por devolverme la visita. Un placer tenerte aquí. Ojalá te guste mi desván. Un besazo.

      Eliminar
  2. Desconocía el sitio este para hacer mapas de imágenes. Me lo apunto por si algún día tuviese la necesidad jejeje
    Mil gracias!!!
    XOXO

    ResponderEliminar
    Respuestas
    1. Yo, desde que lo conocí, recurro tanto a él que acabarán haciéndome miembro honorífico jeje.
      Gracias a ti por comentar, visitar y seguirme.
      Un besazo.

      Eliminar
  3. Muy Buena tutorial y util, gracias por compartirla

    ResponderEliminar
    Respuestas
    1. Gracias a ti por opinar. La verdad es que descubrí eso del mapeo gracias a misslavanda.es, y me ha abierto muchas puertas jeje. Espero que te sea útil.

      Eliminar
  4. ¡Gracias, gracias, gracias, por fin, gracias a ti he podido poner los iconos de redes sociales! ¡Chupi! jajaja

    ¡Besotes!

    Tengo que hacer mención de tu blog y del montón de cosucas chulas que tienes por aquí.

    ResponderEliminar
    Respuestas
    1. Eres un solete, guapi. Creo que en realidad se puede hacer de otra forma si las imágenes no son muy complejas, pero tengo que investigarlo. Esta forma es más arcaica, aunque funciona, pero no conviene poner muchos widgets de estos porque ralentizan mucho la página. Un besazo.

      Eliminar
  5. Gracias guapa por el post está muy bien explicado, pero esto hay que leerlo detenidamente ;) jeje, estoy muy pez con eso de la informática. Respecto a la consulta que me hiciste ha sido todo un hálago que hayas pensado en mi porque de hecho es un poco la idea de mi blog descubrir todo tipo de cositas útiles jiji, la verdad y sinceramente no tengo ni idea no había oído hablar de esos artículos quizás investigue porque me da mucha curiosidad probar productos nuevos. Por cierto estoy intentando empezar a trabajar con Instagram, te sigo guapa espero tu follow de vuelta. Un besito.

    ResponderEliminar
    Respuestas
    1. ¡Qué bueno, Natalia! No esperaba que leyeras este post. Por supuesto que comenzaré a seguirte en Instagram. Eso ni se pregunta. En cuanto a los productos sobre los que te consulté ya te pasaré información, porque algo sí que he averiguado al respecto y creo que iría muy bien para uno de tus posts. Un besazo.

      Eliminar

Me encanta tenerte por aquí, desvanero. Es un placer conocer tu opinión. Si quieres que te visite, indícame el nombre de tu sitio, pero no me dejes el enlace, por favor. No quiero que Google me penalice. Gracias y un abrazo enoooooooorme.