Mapa interactivo con Gimp y Jquery

Diseño web: mapa interactivo con Gimp

VER EL EJEMPLO

Esta semana os presento un recurso de diseño web para crear mapas interactivos de forma sencilla con el editor de imágenes Gimp. Este programa libre y multiplataforma cuenta con un plugin que permite que, simplemente con el ratón, marquemos cada una de las zonas de la imagen que nos interesa que sean interactivas y que le añadamos una acción, por ejemplo, que vaya a un enlace.

Después, únicamente se ha de copiar el código que genera y pegarlo en la página web, además de subir la foto, claro. Para usarlo, debemos abrir la foto con Gimp y, en el menú superior pulsar en FILTROS/WEB/MAPA DE IMAGEN. En la paleta vertical que se abre a la izquierda, elegimos la forma de selección que más nos interese y, una vez que tengamos la primera área de la imagen seleccionada, se abrirá una ventana en la que podemos añadir la url de destino o la acción javascript, entre otras opciones.

Como veis, este plugin de Gimp es muy útil para el diseño web. La imagen que usamos puede ser la de un mapa o de lo que queramos. Por ejemplo, para una página de salud podríamos emplear un cuerpo humano y al pulsar en las diferentes zonas nos podría dirigir a enlaces con explicaciones sobre ellas.

Si pincháis en este enlace podréis ver un ejemplo del uso de Gimp para crear mapas interactivos. Se trata de un mapa de las comarcas de Mallorca. Pinchando en cada área, nos vamos a una página con información sobre esa zona. Además, con jQuery, hemos conseguido que al pasar el ratón sobre cada zona aparezca un letrero con las ciudades y pueblos más importantes y la zona cambie de color.

¡Hasta la semana que viene!