Colegio  

PRÁCTICAS CON HTML Y Nvu 
San Agustín 
 
PRÁCTICA Nº 9. Mapas sensibles

Vamos a trabajar con la página viernes.html. Lo que tenemos que hacer es

explicar el parque de port-aventura. Y como todos sabemos, la mejor forma de
describir los espacios de un sitio y la forma de ir de unos a otros es con un plano. Al fin
y al cabo, ¿qué hay como indicación de salida de emergencia en un cuarto de hotel, una
descripción literaria o un plano?
En la WEB podemos hacer que una imagen, con suficiente calidad descriptiva y
de discriminación de zonas, sirva como mapa guía que nos lleve a los diferentes
enlaces del sitio en el que nos encontramos. Sobre esa imagen construiremos un mapa
cuyas diferentes zonas vincularán a otros lugares de la WEB. Es decir, podríamos
definir un mapa sensible como una imagen que presenta múltiples enlaces según la
zona donde se sitúe el cursor.
Por ejemplo, en la siguiente web http://mapa.centros.educa.jcyl.es/ puedes ver
un ejemplo de mapa sensible: dependiendo de donde esté el cursor aparacerán los
centros de una provincia u otra.

Como imagen vamos a utilizar la que aparece a continuación, de modo que,

cuando pinchemos en las distintas áreas de la misma (que se corresponderán con las
zonas del parque port aventura), se carguen en el navegador web las páginas
correspondientes a la zona seleccionada (que contendrá un texto de la zona referida).
Descárgate la imagen portaventura.gif de la página web del profesor y
guárdala en la misma carpeta donde tienes viernes.html.

1
 
Colegio  
PRÁCTICAS CON HTML Y Nvu 
San Agustín 
 

Ahora tendremos que hacer 2 tareas:

1. Hacer que la imagen tenga “zonas sensibles”
2. Crear las páginas que se mostrarán al pinchar en esas zonas

PASO 1: Hacer un mapa sensible en GIMP

Lo primero será utilizar la opción de menú archivo→abrir para seleccionar el

archivo de imagen. Abrimos la imagen que nos hemos descargado (portaventura.gif).
La ventana en la que se abre la imagen mostrará una barra de menú en la zona superior
y en ella elegiremos filtros→ web→ mapa de imagen que dará paso a una nueva
ventana en la que iremos trabajando para delimitar las zonas sensibles que servirán
como vínculos.
El procedimiento consta de dos pasos:
1. Seleccionar la zona de la imagen que quiero que sirva de soporte al enlace
(arriba a la izquierda hay herramientas de selección). Vamos a seleccionar la
zona de CHINA. Al cerrar la selección nos aparece una ventana
correspondiente al paso siguiente:

2
 
Colegio  
PRÁCTICAS CON HTML Y Nvu 
San Agustín 
 

2. Crear un vínculo en esa zona, estableciendo el destino al que nos llevará la

pulsación sobre la misma: rellenaremos la URL con el nombre de la página web
que se tiene que mostrar, en este caso: china.html

Tendremos que hacer lo mismo para las distintas zonas del parque: FAR WEST,
MEXICO, POLINESIA, MEDITERRÁNEA. Llama a las páginas que se tendrán que

3
 
Colegio  
PRÁCTICAS CON HTML Y Nvu 
San Agustín 
 
mostrar de la siguiente manera: farwest.html, mexico.html, polinesia.html,
mediterranea.html. La única precaución que deberíamos adoptar es procurar que las
zonas no se solapen para no crear situaciones que den lugar a errores, aunque en ese
caso tendrá preferencia para la delimitación de la zona la última que se haya creado.
Cada vez que cierres la selección de una zona aparecerá automáticamente una
ventana para introducir el destino.
Cuando hemos completado el mapa obtendremos algo similar a lo que se
muestra en la imagen:

Ahora lo único que nos queda es obtener el código que se ha generado para
pegarlo en nuestra página. Para conseguirlo utilizamos el menú ver→fuente, copiamos
lo que nos aparece para pegarlo en el código de nuestra página.

4
 
Colegio  
PRÁCTICAS CON HTML Y Nvu 
San Agustín 
 
PASO 2: Hacer las páginas web
Abrimos en Nvu la página viernes.html y pegamos en el código fuente lo que
nos ha salido en GIMP (después del último </big> que hay después de VIERNES y
antes de </td>).

Después del último </big> y antes de la etiqueta fin de columna </td> 

Nos queda el siguiente resultado:

5
 
Colegio  
PRÁCTICAS CON HTML Y Nvu 
San Agustín 
 
Guardamos la página (viernes.html). Si ahora abrimos la imagen en el
navegador, veremos que el cursor se transforma en mano en las distintas partes de la
imagen que hemos seleccionado con el GIMP. Si pinchamos en esas zonas nos saldrá
un error porque aún no hemos creado las páginas a las que llevan esos hiperenlaces.

Para crear el resto de las páginas lo que vamos a hacer es utilizar la página
viernes.html. Igual que en la práctica 4, haremos 5 copias de la página viernes.html y
las llamaremos farwest.html, china.html, mexico.html, mediterranea.html y
polinesia.html.

Editamos esas páginas con Nvu de forma que:

• Cambiamos el título que hay encima del mapa (viernes)
por el nombre de la zona (china, polinesia, etc.)
• Debajo del plano de port aventura, insertamos un
pequeño texto explicando las atracciones que hay en esa zona del
parque.

Es mejor realizar estas dos acciones en el CÓDIGO FUENTE, ya que Nvu no

trata bien las imágenes de mapas sensibles.

6
 
Colegio  
PRÁCTICAS CON HTML Y Nvu 
San Agustín 
 

Después de último </map> 
y antes de la etiqueta fin de 
columna </td>. Es 
conveniente poner un intro 
(<br>) al principio.

Quedará algo así:

Ya solo nos queda subir todas las páginas (viernes.html, china.html,

polinesia.html, etc.) y la imagen portaventura.gif al servidor.

7