Mapas interactivos

Uno de los elementos que pueden dar a nuestra web un aspecto más atractivo es un mapa interactivo. Este que sigue es el código que lo genera:
<MAP NAME=”mapa”>
<AREA SHAPE=”rect” COORDS=”64,128,106,156″ HREF=”bart.htm”>
<AREA SHAPE=”rect” COORDS=”116,113,161,171″ HREF=”bart.htm”>
<AREA SHAPE=”rect” COORDS=”138,92,161,171″ HREF=”bart.htm”>
<AREA SHAPE=”rect” COORDS=”95,153,133,190″ HREF=”bart.htm”>
<AREA SHAPE=”rect” COORDS=”143,95,174,135″ HREF=”bart.htm”>
<AREA SHAPE=”rect” COORDS=”30,20,160,170″ HREF=”homer.htm”>

<AREA SHAPE=”default” NOHREF>
</MAP>

<IMG USEMAP=”#mapa” SRC=”barthomr.jpg”>

 

La primera línea contine el tag <MAP>, que indica al navegador que pasamos a definir un mapa. El modificador NAME asigna un nombre a dicho mapa (en este ejemplo el nombre es “mapa”).

Las siguientes líneas indican áreas dentro del mapa con el tag <AREA>. Este tag tiene los siguientes modificadores:

SHAPE: define la forma de cada una de estas áreas. En este ejemplo estas áreas tienen forma rectangular (hay otras formas que no se muestran en este ejemplo).
COORDS: define las coordenadas de cada uno de estos rectángulos. La primera pareja de números son las coordenadas del ángulo superior izquierdo del rectángulo, la segunda pareja las del ángulo inferior derecho.
Estas coordenadas son respecto a un sistema de ejes (x,y) que tiene su origen en el ángulo superior izquierdo de la imagen, su eje x es horizontal y positivo hacia la derecha, y el eje y es vertical y positivo hacia abajo.
HREF: indica el fichero de destino.
En caso de que dos áreas se superpusieran, tendrá preferencia la que esté definida más arriba en la lista.

La línea <AREA SHAPE=”default” NOHREF> indica al navegador que las áreas no incluidas en ningún rectángulo no contienen enlaces.

El cierre </MAP> indica al navegador que se ha terminado de definir el mapa.

Por último, la línea <IMG USEMAP=”#mapa” SRC=”barthomr.jpg”> inserta un gráfico que utiliza la definición de mapa anterior. Pare ello, incluímos en el tag <IMG> el modificador MAP cuyo valor será el nombre del mapa.

Ahora, al pinchar sobre Homer se abrirá la página de Homer, y al pinchar sobre Bart se abrirá la página de Bart.