Mapa de enlaces en GIMP

Aunque es una práctica poco habitual, el mapeo de imágenes sirve para definir zonas interactivas en un layout cuando, por sus características, éstas no pueden ser rectangulares. También para el armado de newsletters, donde normalmente lo más fácil es realizar este procedimiento sobre una imagen, en lugar de construir un mail completo en HTML.

Para ello existen dos etiquetas: <map>, que define el lienzo donde se dibujarán los enlaces, y <area>, que recibe las coordenadas del trazado. Sin embargo, hacer esto a mano, es decir, escribiendo código, implica poseer un doctorado en matemáticas y una paciencia de araña, y, al día de hoy, no conozco a ningún ser humano que se haya tomado tal trabajo. Nuestras dos opciones más directas para crear los enlaces mediante una interfaz gráfica fueron siempre, hasta ahora, Dreamweaver o Fireworks.

Un 29 de febrero, nuestro jefe nos pide un newsletter o una landing page con un catálogo. En ese momento recordamos que la semana pasada rompimos definitivamente con Windows y lo eliminamos de nuestro disco duro. Lo primero que hacemos es pellizcarnos para comprobar si estamos soñando, pero resulta que no. Luego recordamos que GIMP es nuestro amigo.

La cuestión…

GIMP cuenta con un plugin pensado específicamente para esto. Simplemente abrimos la imagen que llevará el mapa de enlaces y vamos a Filtros > Web > Mapa de imagen. En este ejemplo, utilizaremos un mapa de argentina.

area-de-trabajo-1_003

Allí, se nos abrirá la imagen en una ventana aparte, con una variedad de opciones. De todo ello, lo que más nos interesa son las herramientas de figuras geométricas de la izquierda, ya que con ellas daremos forma a nuestras áreas interactivas. Podemos definir enlaces rectangulares, elípticos o poligonales, y se nos brinda una herramienta de selección directa para editarlos luego.

area-de-trabajo-1_005

Al completar una figura (para lo cual hay que dar un clic si es rectángulo o elipse, o dos clics si es un polígono), se nos abrirá un diálogo donde podemos colocar la ruta del enlace. En otra de sus pestañas, también, se nos permite agregar algunos eventos JavaScript del ratón.

area-de-trabajo-1_009

Una vez tengamos listos todos los enlaces que queremos, iremos a Archivo > Guardar. Notaremos que el programa le añade la extensión .map al archivo que va a exportar.

area-de-trabajo-1_006

No debemos preocuparnos, ya que se trata de un archivo de texto plano que se puede abrir con cualquier editor de texto. En mi caso, lo he abierto con Sublime Text (y he seleccionado la sintaxis HTML para que se coloreen las etiquetas, atributos y valores).

area-de-trabajo-1_007

Como vemos, GIMP nos ha generado todo el código necesario, con algunos comentarios que podemos borrar. Ahora solo tenemos que copiarlo y pegarlo donde queremos que se muestre la imagen interactiva, ya sea dentro de nuestro layout o en el cuerpo cualquier mail con formato HTML. Eso es todo. 😉

Leave a Reply