Imágenes con Enlaces: Mapa de Imágenes con GIMP

Mapa de Imágenes

Un mapa de imagen permite definir diferentes zonas “sensibles” dentro de una imagen. El usuario puede dar clic sobre cada una de las zonas definidas y cada una de ellas puede llevar a una dirección URL diferente. La mayoría de los efectos usados son enlaces dinámicos a otra página web cuando se pulsa sobre una de las áreas sensibles. Las zonas o regiones que se pueden definir en una imagen se crean mediante rectángulos, círculos y polígonos.

Los mapas de imágenes son dispositivos muy útiles para la Web porque representan un medio alternativo y gráfico para navegar a otras páginas. Un problema, sin embargo, es que pueden ser difíciles de construir. Para cada hipervínculo, debe definirse una región de la imagen que active el enlace cuando se haga clic con el ratón. Esta región está definida por un polígono, que a su vez está especificado por un conjunto de pares de coordenadas que dan las ubicaciones de los vértices del polígono. La dificultad viene de tratar de determinar los valores de coordenadas. Para un mapa de imágenes que contiene muchos hipervínculos asociados a regiones complicadas, la tarea de ensamblar estos puntos puede ser bastante ardua.

Afortunadamente, existen programas que permiten introducir gráficamente los vértices de las regiones poligonales dibujando directamente en la imagen. Además, permite asignar fácilmente hipervínculos y Java scripts a las regiones. Al procesar la imagen, el complemento escribe automáticamente el archivo HTML que muestra el mapa de imagen. Toda la información posicional sobre los vértices de las regiones del mapa se escribe en este archivo junto con los hipervínculos y las referencias a los Java scripts asociados con las regiones. Este filtro de mapa de imagen, permite diseñar fácilmente áreas sensibles en una imagen. Los programas de diseño de sitios web tienen esto como una función estándar, y programas libres como GIMP puede hacerlo de una manera similar.

GIMP

GIMP (GNU Image Manipulation Program) es un programa libre de creación y tratamiento de imágenes. Inicialmente previsto para funcionar sobre los sistemas compatibles Unix (Linux por ejemplo), y en cualquier distribución de Linux, donde viene instalado por defecto como programa de tratamiento de imágenes de mapa de bits. GIMP tiene una potencia equiparable a software privados de diseños, de fácil acceso y absolutamente gratuito al estar incluido dentro del Software GNU. Esta disponible en https://www.gimp.org/.

Generar un Mapa de Imágenes con GIMP

Inicialmente se debe tener una carpeta donde este la imagen a editar. En nuestro caso usaremos la imagen_a ubicada en /home/usuario/imagenes/imagen_a.png.

imagen_a: Imagen disponible en Pixabai CC0 Public Domain, Free for commercial use, No attribution required.

Para generar el mapa de la imagen:

  • Abrimos GIMP y seleccionamos la imagen para editar.
  • Seleccionamos: Menú Filtro, Web, mapa de imágenes y obtendremos la siguiente pantalla.
  1. Barra del menú:
  • Archivo: Guardar; Guardar como. Abrir. Abrir reciente.
  • Editar: Editar el área de información.
  • Ver: Lista de áreas, Fuente. Color. Escala de grises.
  • Mapa: Flecha. Rectángulo. Círculo. Polígono.
  • Editar información del mapa.
  • Herramientas: Rejilla; Configuración de la rejilla. Usar las guías de GIMP; Crear guías. Crear guías.
  1. La barra de herramientas: La mayoría de entradas son atajos a algunas de la funciones ya descritas en la barra de menú.
  2. Estas herramientas le permiten crear varias formas de áreas: Para usarlas debe pulse sobre la imagen, mover el puntero y pulsar otra vez.

  3. El área trabajo: En el área principal de la ventana del mapa de la imagen, en el lado izquierdo, encontrará su área de trabajo en donde puede dibujar todas las formas de áreas que quiera con las herramientas adecuadas. Junto al área de trabajo están los iconos mostrados verticalmente, uno para el puntero, tres para llamar a herramientas para generar áreas de varias formas, una para editar las propiedades de la zona, y finalmente una para borrar una zona seleccionada; también puede llamar a estas funciones con el menú Mapa.

  4. El área de selección: A la derecha hay un área de visualización, como una lista de propiedades de las áreas creadas. Una pulsación sobre un elemento de la lista selecciona automáticamente la forma correspondiente del área de trabajo, entonces puede modificarla. Junto a la pantalla hay un conjunto vertical de iconos; su uso es obvio pero una ayuda emergente le proporciona información sobre cada función. Desafortunadamente, los símbolos de flecha para mover una entrada de la lista arriba o abajo no funcionan aquí. Pero desde luego evite crear áreas solapadas, ya que no usa estas funciones.

Luego de generar las areas con los link, debemos guardarlas en la misma carpeta donde se encuentra la imagen inicial. Este formato viene por defecto como “imagena.map”, sin embargo debemos cambiar la extensión a HTML, /home/usuario/imagenes/imagen_a.html.

El programa generara un archivo HTML que al abrirlo con cualquier editor de texto podremos observar el siguiente código:

<img src=”/home/usuario/imagenes/imagen_a.png” width=”917″ height=”638″ border=”0″ usemap=”#map” />

<map name=”map”>

<area shape=”rect” coords=”9,33,317,170″ target=”Uriel Castellanos” href=”https://urielcastellanos.wordpress.com/&#8221; />

<area shape=”circle” coords=”169,346,86″ target=”Buscador” href=”https://duckduckgo.com/&#8221; />

<area shape=”rect” coords=”649,17,881,86″ target=”Archive” href=”http://archive.org/web/&#8221; />

<area shape=”poly” coords=”767,448,806,409,848,430,825,517,766,572,697,514,699,457,726,440,765,448,766,447″ target=”Libros” href=”www.epublibre.org/inicio/index” />

<area shape=”poly” coords=”748,255,904,253,914,291,826,332,616,359,576,312,640,278,717,256,757,253,757,252,755,252″ target=”APP” href=”http://appinventor.mit.edu/explore/&#8221; />

<area shape=”poly” coords=”96,524,158,494,285,518,286,576,246,598,188,626,137,632,57,623,26,581,60,528,96,521″ target=”Musica” href=”https://www.jamendo.com/start&#8221; />

El código HTML que lo acompaña. Viene definido mediante la etiqueta <img>. Esta etiqueta indica donde se encuentra la imagen en nuestro equipo, en el caso de adicionarla a una pagina web, debe modificarse este código /home/usuario/imagenes/imagen_a.png por la dirección en la web.

  • En el caso de usarla en un aula virtual moodle, debe adicionar la imagen en el repositorio de moodle “Archivos”, y copiar el enlace generado: http://www.moodledelauniversidad.com/imagen_a.png. Este enlace debe sustituirlo en el código original, y solo debe adicionara el código HTML en el aula virtual.

La etiqueta <map> se usa para definir las zonas o regiones de la imagen. Cada zona se define mediante la etiqueta <area>. Si una imagen utiliza un mapa de imagen, debe indicarlo mediante el atributo usemap. El valor del atributo debe ser el nombre del mapa de imagen definido en otra parte del mismo documento HTML. Las áreas se definen mediante el atributo shape que indica el tipo de área y coords que es una lista de coordenadas cuyo significado depende del tipo de área definido. El enlace de cada área se define mediante el atributo href, con la misma sintaxis y significado que para los enlaces normales.

El siguiente ejemplo muestra la imagen generada que contiene los enlaces:





Elaboración y Referencias

 

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Salir /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Salir /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Salir /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Salir /  Cambiar )

Conectando a %s