Hemos visto que podemos enlazar una página con otra usando vínculos de texto o imágenes individuales.

Una alternativa es utilizar una imagen única, para enlazar a varias páginas, yendo a una u otra según el área en donde se haga click. A este tipo de imagenes se las llaman mapas.

Para crear un mapa, debemos partir de una imagen, y utilizar código HTML para crear las áreas (zonas activas o hotspots).

Para definir un área activa rectangular, necesitamos conocer las coordenadas de su ángulo superior izquierdo y las de su ángulo inferior derecho. Estas coordenadas las obtenemos con cualquie programa gráfico.

La etiqueta que crea un mapa es <MAP> </MAP> que contendrá una o más etiquetas <AREA /> con los datos de cada zona.

Supongamos que la primera zona activa tiene estas dos coordenadas (a1,b1) y (c1,d1) y que la segunda zona activa tiene las coordenadas (a2,b2) y (c2,d2), el código resultante sería este:

<MAP NAME="nombremapa">
    <AREA SHAPE="RECT" COORDS="a1,b1,c1,d1" HREF="URLdestino1">
    <AREA SHAPE="RECT" COORDS="a2,b2,c2,d2" HREF="URLdestino2">
    <AREA SHAPE="DEFAULT" NOHREF>
</MAP>
<IMG SRC="URL_imagen" USEMAP="#nombremapa"
     WIDTH="ancho" height="alto">

Cuando hagamos click en la parte superior de la imagen, nos redirigiremos a la página de Google normal, y haciendo click más abajo, a Google Images.

En la etiqueta MAP, agregamos un atributo NAME para identificar la imagen del mapa. En la etiqueta AREA, definimos el atributo HREF con la URL de destino, SHAPE con la forma que va a tener y COORDS con las coordenadas del área.

AREA SHAPE=”DEFAULT” NOHREF es una etiqueta que define el área completa del mapa , indicando que su forma es la que tiene por defecto (rectangular). Si se quisiera que el mapa no abarcara la totalidad de la imagen, o incluso que tuviera una forma distinta, habría que indicarlo aquí, en lugar de la instrucción DEFAULT. Por último, NOHREF hace que el área completa de la imagen no sea una zona no-activa sino sólo las áreas definidas.

La etiqueta IMG es similar a las usadas anteriormente exceto que se le agrega un atributo nuevo, USEMAP que indica que es el mapa definido anteriormente con ese nombre.

Las zonas activas se pueden definir también como círculos o polígonos. Para una circular, el atributo es SHAPE=”CIRCLE” y las coordenadas deben ser tres, la de su centro (x,y) y la de su radio (r):

<AREA SHAPE="CIRCLE" COORDS="x,y,r" HREF="URLvinculo">

Para definir una zona poligonal hay que usar el atributo SHAPE=”POLYGON” y conocer las coordenadas de los distintos puntos (x1,y1), (x2,y2), (x3,y3), etc:

<AREA SHAPE="POLYGON" COORDS="x1,y1,x2,y2,x3,y3,..."
     HREF="URLvinculo">