Mapas interactivos de enlaces

TEMA 2.
CREAR SITIOS WEB USANDO
CÓDIGO HTML
Tecnologías de la Información
1ºBachillerato
IES Zurbarán (Badajoz)
Sesión 11
Mapas interactivos de enlaces
Introducción
●
●
Posiblemente, la forma mas elegante y
"profesional" de usar los links en las
imagenes sea el mapa interactivo.
El mapa interactivo es, simplemente, un
gráfico en el que hemos definido una serie
de zonas.Cada una de estas zonas tiene un
link asociado que enviará a donde
decidamos a quien pique en él con el ratón.
Etiqueta MAP
●
●
Primer paso: buscar o crear una imagen
sobre la que trabajar, decidiendo qué zonas
corresponderán a cada link.
A continuación se ponen por escrito esas
zonas en la siguiente estructura:
<MAP NAME=”nombre_que_le_das_al_mapa”>
<AREA SHAPE=”tipo” COORDS=”coordenadas” HREF=”dirección”>
<AREA SHAPE=”tipo” COORDS=”coordenadas” HREF=”dirección”>
<AREA SHAPE=”tipo” COORDS=”coordenadas” HREF=”dirección”>
...
</MAP>
Se coloca después de la etiqueta BODY
Etiqueta MAP
●
<MAP> y </MAP> le dicen al navegador donde empieza y acaba la definición del
mapa. Esta etiqueta tiene una opción que es NAME que sirve para darle un nombre
al mapa. Nombre que luego tendremos que usar.
●
<AREA> no hay que cerrarla. Define una zona concreta de nuestro mapa, la que, al
picar con el ratón, nos linkará a un lugar concreto. O sea, que habrá tantos <AREA>
como enlaces queramos en nuestro mapa. Veamos sus opciones:
–
SHAPE: define la forma de esta zona, que puede ser: RECT (Rectangular),
CIRCLE (Circular) o POLY (Un polígono cualquiera).
–
COORDS: indica las coordenadas de la zona que ya definimos en SHAPE. Su
valor depende del tipo que escogieramos en esa opción.
●
●
●
–
En el caso de que usaramos RECT, COORDS indicará cuatro números separados por comas, los
dos primeros son las coordenadas X e Y del vértice superiór izquierdo, y los dos últimos las
coordenadas X e Y del inferior derecho.
En el caso de CIRCLE, COORDS indicará tres números separados por comas, los dos primeros
son las coordenadas X e Y del centro del circulo, y el tercero su radio.
Y en el caso de POLY, COORDS indicará tantos pares de números separados por comas com
vertices tenga el poligono. cada par indicando las coordenadas X e Y de un vertice.
HREF, por último, indica la dirección a la que el link del area indique.
Usar el mapa
●
●
Una vez definidas las zonas, hay que situar
la imagen en la página.
Esto se hace como para cualquier otra
imagen con enlace, pero con una minúscula
y sutil diferencia:
<A> <IMG SRC=”grafico” USEMAP=”#nombre_mapa”> </A>
No se usa el parámetro HREF
Ejemplo
Ejercicio 36
(mapas de enlaces)
El ejercicio consiste en hacer una página web que contenga un mapa con dos enlaces. Uno
para Extremadura y otro para Madrid
Altura 20%
Alto de la
tabla 100%,
ancho 80%
Altura 80%
anchura 40%
anchura 60%
Ejercicio 36 (continuación)
(mapas de enlaces)
Datos:
●
Coordenadas del polígono para EXTREMADURA
Valores para la página:
●
●
X 42
43
Y 99 113
32
36
57
74
89
75
60
118 155 163 148 126 106
94
●
●
●
●
●
●
●
Coordenadas del polígono para MADRID
●
●
X 100
113
125
123
117
116
106
●
Y
99
105
104
94
86
77
88
●
Espacio entre celdas 4
Espacio dentro de la celda 20
Color del borde: negro
Color de la primera fila:
lightgreen
Color de la primera celda de la
segunda fila: lightblue
Color de la página web:
lightyellow
La tabla está centrada
El contenido de la primera fila
está centrado
El contenido de la seguda celda
de la segunda fila está
centrado.
El tipo de letra es Bitstream
Vera Sans
El mapa tiene dos únicas zonas
sensibles.
La primera apunta a
extremadura.html
●
La segunda a madrid.html
Ejercicio 36 (continuación)
(mapas de enlaces)
Tipo de letra:
Bitstream Vera Sans
a tamaño 4
La imagen se llama
extremadura.gif
extremadura.html
Ejercicio 36 (continuación)
(mapas de enlaces)
Tipo de letra:
Bitstream Vera Sans
a tamaño 4
La imagen se llama
madrid.gif
madrid.html