I.E.S.

Al-ndalus (Almera)

Prctica 14. Mapa de imagen para la web

Qu es un mapa de imagen:
Un mapa de imagen es una imagen utilizada en una pgina web, la cual contiene una o ms reas invisibles llamadas zonas activas. Cada una est asociada a un hiperenlace (enlace, hipervnculo). Normalmente la imagen ofrece al usuario pistas visuales sobre la informacin que est disponible al hacer clic en cada parte de la imagen. Un ejemplo tpico es el de una pgina web de un pas en la cual aparece una imagen con el mapa poltico de dicho pas en el cual cuando ponemos el ratn encima de una regin o provincia y pulsando el botn izquierdo nos enva a una pgina relacionada con esa regin o provincia:

Figura: En esta imagen, al pulsar con el ratn sobre una provincia nos abre su pgina web.

La prctica va a consistir en crear un mapa de imagen de un pas de tal forma que al pulsar sobre alguna de sus regiones/provincias u otro tipo de divisiones territoriales se abra una pgina web relacionada. El mapa de imagen lo insertaremos en una pgina web (archivo HTML). Un ejemplo de mapa de imagen es el mapa de Espaa que aparece en la pgina http://www.restaurantesvegetarianos.es/content/view/311/296/ Se describe el procedimiento en los vdeos: http://www.youtube.com/watch?v=4PE_b-yswpI o en http://www.youtube.com/watch?v=_POR3nzOz1E

Procedimiento a seguir:
GIMP dispone de un filtro que de forma rpida y fcil crea un mapa de imagen para un sitio web. Previamente debemos disponer de la imagen en la que crearemos el mapa. Este filtro funciona sobre la capa activa. En primer lugar abrimos la imagen (en la parte de Ejercicios se especifica cul) con Archivo -> Abrir.

I.E.S. Al-ndalus (Almera)

Abrimos el cuadro de dilogo de mapa de imagen mediante Filtros -> Web -> Mapa de imagen:

Las zonas de este cuadro de dilogo son: (1) Zona central donde se sita la imagen sobre la que trabajamos.
Tiene reglas y podemos colocar una rejilla para trabajar de forma ms precisa. Si haces clic con el botn derecho del ratn sobre esta zona aparecen las herramientas con las que puedes trabajar.

(2) Herramientas, de arriba a abajo:

Flecha de seleccin de zona. Definir rea rectangular. Definir rea circular (elipse). Definir rea poligonal. Edicin del rea seleccionada.

(3) Barra de mens y botones de acceso rpido a las opciones ms comunes de Mapa de imagen. (4) Listado de reas que contiene nuestro mapa de imagen y ordenacin de ese listado con acceso a las propiedades de cada rea y la opcin de borrado. A continuacin pasamos a definir cada rea o regin de la imagen que va a tener asociada un enlace. Lo haremos usando la herramienta ms adecuada, es decir, la herramienta rea poligonal. que define un

Esta herramienta de seleccin poligonal funciona de modo similar a la seleccin mediante tijeras inteligentes: se van trazando segmentos pulsando con el botn izquierdo del ratn siguiendo la forma de la regin a seleccionar hasta llegar al punto inicial, donde hacemos doble clic. 2

I.E.S. Al-ndalus (Almera)

Al cerrar la regin seleccionada con doble clic, aparece el siguiente dilogo:

En el dilogo introducimos la direccin web que se abrir cuando pulsemos sobre esa regin en URL a activar cuando se pulse sobre esta rea, desmarcamos la casilla Enlace relativo y escribimos un texto alternativo (texto que aparecer en pantalla al poner el ratn sobre una regin determinada y que ser el nombre de la provincia o regin correspondiente al rea seleccionada) en el campo Texto alt. Este proceso se repite tantas veces como reas con enlace tengamos. Para finalizar debes guardar el mapa de imagen, de las dos formas que existen. Creamos primeramente una carpeta donde se albergar tanto la imagen inicial como el resto de archivos necesarios: 1. La primera es guardarlo en la carpeta creada en el formato que elige el filtro Mapa de imagen, que es "nombre.map"; este formato sirve para modificar posteriormente el mapa de imagen si fuera necesario. 2. La segunda forma consiste en guardar en la carpeta creada el mapa de imagen con la extensin "HTML"; por ejemplo podemos escribir al guardar como nombre de archivo "nombre.html". Lo que se guarda es un archivo de texto que contiene el cdigo HTML, es decir, que acabamos de crear una pgina web desde GIMP que contiene el cdigo de las zonas activas y que enlazan con las pginas web de las provincias. 3. Para que funcione todo correctamente, debes guardar en la misma carpeta (la que hemos creado) la pgina web recin creada (archivo HTML) y la imagen sobre la que hemos hecho el mapa de imagen. La comprobacin final consiste en hacer doble clic sobre el archivo con extensin HTML, se nos abrir el mapa de imagen creado en el navegador web por defecto (Mozilla, Internet Explorer, Chrome, etc) y los enlaces y textos alternativos debern funcionar.

I.E.S. Al-ndalus (Almera)

Ejercicio:

1. Crear una pgina web con un mapa de imagen generado a partir de la imagen descargada de internet de un mapa poltico de las regiones/provincias, etc de un pas (preferentemente de un pas cuya primera letra coincida con la primera letra del apellido del alumno/a). Al menos se establecern las reas y enlaces para seis regiones/provincias. Cada enlace abrir una pgina web relacionada con su regin/provincia. Sobre la imagen inicial se sobreimpresionar el nombre del alumno/a.
Entrega: Hay que subir mediante Filezilla la carpeta que contiene la imagen original los archivos .map y .html.