Image Maps: para mapear imágenes online

Mapear una imagen básicamente significa poner varios enlaces en diferentes partes de una sola imagen. Para ello se usa la etiqueta <MAP> y la etiqueta <AREA> que define las áreas de la imagen donde se agregan los enlaces. Estas áreas contienen las coordenadas de la parte seleccionada de dicha imagen, coordenadas que para la mayoría de los mortales nos parecen que están en chino; se trata de establecer la distancia en pixeles en la que se encuentra alguna área de la imagen, y en esas coordenadas se agrega el enlace que sólo será accesible en dicha área.

Por ejemplo, en la siguiente imagen hay 8 enlaces, y a cada uno de ellos sólo se le puede dar click en su respectiva área.

Establecer las coordenadas de cada área puede resultar de lo más estresante, cansado, agotador, y de locos; por suerte hay servicios online que permiten hacer todo esto sin necesidad de contar pixeles, medir, ni nada.
Hay varios, pero hoy hablaremos de Image-Maps. Esta herramienta online nos permite mapear nuestras imágenes de forma sencilla y con las opciones necesarias.

Primero habremos subido nuestra imagen a un alojamiento y pegamos la URL de la imagen en el área correspondiente. También nos da la opción de buscar la imagen del ordenador pero siempre es mejor subirla nosotros mismos para tener la seguridad de que nuestra imagen estará disponible todo el tiempo, ya que las imágenes que subas desde ahí serán eliminadas después de 24 horas.


Después que hemos dado click en Continuar comenzaremos al mapeado de la imagen, para ello da click derecho y se activará un menú.


Create Rect es para formar un rectángulo, Create Poly para formar un polígono, y Create Circle para formar un círculo. Elige la que necesites y traza la forma para seleccionar el área de la imagen a la que le pondrás el enlace.
Inmediatamente aparecerá una ventana para que agregues la URL que tendrá esa área, además de un title, alt, e ID si lo deseas. En la pestaña Events podrás establecer si el enlace se abre en una nueva pestaña o no.


Una vez que has terminado de establecer las áreas de tu imagen da click derecho y en el menú selecciona Get Code.


En la pestaña HTML Code hasta abajo, verás tu código. Cópialo y pégalo en una entrada o gadget de tu blog y listo.

Como puedes ver es una herramienta fácil de usar, y con las opciones necesarias para mapear tus imágenes online y crear banners, carteles promocionales, o cabeceras con múltiples enlaces. En el caso de esto último, si deseas hacer una cabecera que tenga múltiples links, sigue los primeros pasos de esta entrada, sólo que, en lugar de añadir el script que ahí se menciona, pondrías el código de tu imagen mapeada.