Mapa de imagen

No es intención de este curso aprender a realizar páginas web, pero sí conocer las posibilidades que nos aporta GIMP en el tratamiento de imágenes y uno de los destinos de las imágenes que tratemos es formar parte de una página web.

Un Mapa de imagen es una imagen sobre la que marcan zonas que, en una página web, permiten acceder a diferentes secciones, cada zona suele contener un enlace distinto.

De esta forma podemos crear una única imagen que tenga todos los enlaces de nuestro sitio web y no sea necesario crear numerosas imágenes para marcar los enlaces.

GIMP dispone de un filtro que de forma rápida y fácil crea un mapa de imagen para nuestro sitio web. Previamente debemos disponer de la imagen en la que crearemos el mapa. Este filtro funciona sobre la capa activa y es conveniente que tengamos una imagen aplanada para trabajar con el filtro.

Vamos a trabajar con una imagen a la que añadiremos cuatro zonas con texto que servirán como enlaces de nuestra página web.

1. Guarda la imagen "colegio.jpg" y ábrela en Gimp.
   

2. Escribe las siguientes palabras, que se corresponden con las distintas secciones de nuestro sitio web: "Claustro"; "Actividades"; "Enseñanzas" y "AMPA".
   
   
3. Elige como tipo de fuente "Comic Sans", color blanco y tamaño 30 píxeles. Sitúa los textos a la izquierda, alinea con una guía y aplana la imagen.
   
   
   
4. Abre el filtro Web --> Mapa de imagen. Al abrirse este filtro encontrarás las siguientes zonas cuyos usos se especifican a continuación.
   
   

   Zona central donde se sitúa la imagen sobre la que trabajamos. Tiene reglas y podemos colocar una rejilla para trabajar de forma más precisa. Si hacemos clic con el botón derecho del ratón sobre esta zona y aparecen las herramientas con las que podemos trabajar.
   Herramientas, de arriba a abajo: Flecha de selección de zona. Definir área rectangular. Definir área circular (elipse). Definir área poligonal. Edición del área seleccionada.
   Barra de menús y botones de acceso rápido a las opciones más comunes de Mapa de imagen.
   Listado de áreas que contiene nuestro mapa de imagen y ordenación de ese listado con acceso a las propiedades de cada área y la opción de borrado.

5. Vamos a utilizar cada las herramientas de creación de áreas activas para ver el funcionamiento de este filtro. Seleccionamos la herramienta Definir área rectangular y metemos dentro de un rectángulo la zona donde se encuentra la palabra "Claustro". Hacemos un clic, soltamos, arrastramos y volvemos a hacer clic para cerrar el rectángulo. Al cerrar nos aparece el cuadro de diálogo Configuración de área, marcando el área con el número 1.
   
   

   Aquí debemos introducir los datos del enlace que tendrá el área seleccionada. Dejamos todo como está y ponemos como enlace (URL a activar...) "claustro.htm" y escribimos como Texto alternativo (el que aparecerá al situar el puntero del ratón dentro de esa zona) "Conoce nuestro Claustro". Tenemos dos pestañas más, la relativa a Rectángulo donde nos encontramos las dimensiones y coordenadas del rectángulo; en JavaScript podemos introducir otras imágenes que aparecerán al hacer pasar el puntero del ratón o al hacer clic en esta zona.

6. Dibujamos alrededor de la palabra "Enseñanzas" otro rectángulo. Ponemos como enlace la página "ense.htm" y como texto alternativo "Conoce las enseñanzas que impartimos". Aceptamos.
   

7. Seleccionamos la herramienta Definir área poligonal y creamos un polígono alrededor de la palabra "Actividades", doble clic para cerrar el polígono. El enlace irá dirigido a "activi.htm" y como texto ponemos "Las actividades de nuestro centro". Para finalizar creamos una nueva área para la palabra "A.M.P.A." poniendo como enlace "ampa.htm" y como texto "La Asociación de madres y padres de alumnos".
   

8. Comprobamos que en la zona de la derecha aparecen las cuatro áreas creadas y accedemos a ellas para comprobar que están correctas. Para acceder a la edición de cada área primero debe estar seleccionada, después podemos cambiar el tamaño del área y sus propiedades.
   
   Las selecciones de área pueden cortarse, copiarse y pegarse y tienen jerarquía. Si una se superpone a otra, el mapa de imagen que se crea fuerza al navegador a fijarse en la selección superior en la zona en que se haya producido el solapamiento por lo que se pierde la selección inferior.
   
   Esta característica puede ser bastante interesante si trabajamos adecuadamente el mapa de imagen: imaginemos una imagen de un mapa de España y una selección que incluya toda la imagen, al hacer clic en cualquier zona de la imagen se accedería a una página sobre características del país. Por encima de esta selección creamos otras más pequeñas en cada una de las ciudades importantes por lo que estás áreas se superponen a la anterior y accederíamos a páginas que hablen de la ciudad seleccionada.
   

9. Por último debemos guardar el Mapa de imagen. Lo que se guarda es un archivo de texto que contiene el código HTML que debemos incluir en nuestra página para que funcione correctamente. El resultado podemos contemplarlo a continuación.

Animación y web > Mapa de imagen