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

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:

En un mismo gadget podemos enlazar a varios sitios distintos. Esto redunda en hacer más rápida la carga de nuestra página. 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.

IMPORTANTE (22/5/2022):  respecto a YoyScrap, hay que decir que la web ya no está disponible. Por eso he tenido que suprimir finalmente este último enlace, ya que me estaba generando un error 404 y no podía redireccionar.

Y volviendo al asunto del mapeo. 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].

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.

 

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".

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".

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á.

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

• 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.

• 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".

•  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í:

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.
  

•  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.

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.