Mapa de imagen

Kompozer y Gimp: mapa de imagen para una web

A veces necesitamos crear enlaces en zonas de una imagen y no queremos enredarnos a crear botones. Gimp permite seleccionar las zonas que actuarán como vínculos y nos permitirá editar todo lo necesario, como el destino de ese enlace, para poder obtener el código necesario para su perfecta integración en el diseño de nuestra página (que nosotros crearemos con Kompozer). Este proceso se denomina Mapa de imagen.
Lo primero es disponer de la imagen que servirá de base para el mapa:

Abrimos esa imagen en Gimp y directamente nos vamos a Filtros/Web/Mapa de imagen donde se cargará un editor propio para esta edición.

Determinar las regiones de los enlaces es muy sencillo usando cualquiera de las tres herramientas de que disponemos:

Por ejemplo para el logo de Kompozer nos vamos a conformar con un círculo. No nos preocupamos en exceso de su tamaño y colocación ya que eso lo podremos editar con precisión desde el cuadro que se despliega al finalizar el círculo (no olvidemos activar Vista previa) en la pestaña Círculo:

Si por algún motivo quisiéramos volver a este cuadro sólo tenemos que usar la herramienta de selección (doble clic sobre la forma)

o la miniatuta en el apartado de selecciones (tamién con coble clic)

En la pestaña Enlace de ese mismo cuadro podemos dejar definidos el destino del vínculo (URL) y el atributo alt:

En el caso de que estemos cometiendo la temeridad de hacer nuestra página con marcos , también aquí podemos poner el nombre de la página (frame) de destino y que en el HTML aparecería con el atributo target.

Con la herramienta de polígonos podemos crear los contornos de los otros tres logos (doble clic para concluir el polígino) y rellenamos las casillas propias de la pestaña Enlace. En el caso de la forma del centro el destino elegido es un correo electrónico. Esto hará que se cargue el programa propio de estos asuntos con el campo de la dirección relleno; así que no ponga el correo tal cual o los robots maliciosos le dejarán el correo llenito de spam. Ponga algo como minombre(arroba)jotmail.com en vez de minombre@jotmail.com y que sea el navegante el que haga el cambio.

Una vez concluido podemos tenemos un par de opciones:

Si no hemos comenzado la página en Kompozer podemos guardar este trabajo como mipagina.html directamente desde el editor del mapa de imagen de Gimp (si guarda en formato MAP podrá continuar con el trabajo en otro momento o reeditar al gusto).

Como la ruta hacia la imagen es relativa este html debe quedar al lado de la imagen o de lo contrario no la encontrará (también podría alterar la ruta desde Kompozer si le apetece meter el mapa en una carpeta con imágenes o algo similar)

Si abre ese html desde Kompozer le aparecerá directamente el mapeado. Ahora sería tan sencillo como Cortar y Pegar dentro de una tabla, centrar o hacer las ediciones normales que haría con este software.

Como es muy probable que ya tenga comenzado su diseño web, lo que querrá es incluir el mapa en él con lo que el método anterior no le vale. Desde el editor de mapas de Gimp existe la posibilidad de copiar todo el código necesario para pegarlo en Kompozer. Vamos a Ver/Fuente y nos aparecerá este cuadro del que podemos seleccionar y copiar el texto:

Si le apetece alterar la ruta de la imagen hacia una carpeta al lado de mipagina.html tal como se dijo antes, también puede hacerlo aquí cambiando, por ejemplo:

por:

Con ese código en el portapapeles nos vamos a Kompozer y lo insertamos donde nos convenga. Por ejemplo el una celda de una tabla (lógicamente en el código fuente). Como el código lleva las medidas de la imagen se creará un rectángulo para ella pero no aparecerá hasta la próxima vez que carguemos ese archivo.

Tras Guardar y volver a Abrir veremos nuestro mapa y nos resultará más agradable y cómodo continuar trabajando:

En fin, el mapa de imagen funcionará cuando navegemos. Es un recurso más que conviene tener en cuenta. Nada espectacular, eso sí, pero nunca se sabe cuándo puede ser útil.

Para conocer más tutoriales visite
El Blog de Joaclint Istgud

Y hasta aquí el tutorial. Si considera que está incompleto, que tiene errores o quiere aportar alguna mejora, deje su sugerencia aquí

Joaclint Istgud con