Los mapas gestionados por el servidor funcionan de la siguiente manera:
Al pasar el mouse por la imagen que sirve de mapa obtenemos las distintas coordenadas de los enlaces, cuando pulsamos en ellos nuestro navegador envía esas coordenadas al servidor y este comprueba en un fichero MAP localizado en un directorio "cgi-bin" a qué página corresponden esas coordenadas y se las envía al navegador y este a su vez le solicita que lo enlace con dicha página.
Nosotros solo mostraremos los que son gestionados por el cliente, la ventaja con estos es que no necesitan enviar la información al servidor y esperar la respuesta de estos, por lo tanto es más rápido y no se necesita un programa CGI que haga funcionar este mapa, el inconveniente con este tipo de mapas es que no todos los navegadores lo soportan, sin embargo del Netscape 2.0, Microsoft Explorer 2.0, Mosaic 2.1, en adelante no tienen problema para verlo.
Primero necesitamos elaborar la imagen que nos servirá de mapa, esto lo hacemos con un programa gráfico y la guardamos en formato "gif" o "jpg".
Para definir que áreas nos servirán de enlaces, es necesario conocer las coordenadas de la imagen y estas nos las da el programa gráfico.
Una vez conocidas las coordenadas podemos empezar con la elaboración del mapa.
La siguiente imagen es un ejemplo de un mapa con enlaces rectangulares:
Y su tag es el siguiente:
<MAP NAME="mapa">.- Con esta etiqueta estamos dando apertura al mapa y también estamos definiendo el nombre de este.
<AREA SHAPE="RECT" COORDS="20,20,140,40" HREF="pba1.html">.- En esta etiqueta estamos definiendo que las áreas activas son de forma rectangular y las coordenadas de una de ellas son 20,20 para el ángulo superior izquierdo y 140,40 para el ángulo inferior derecho y que el enlace será a la página "pba1.html". La línea siguiente es análoga.
<AREA SHAPE="DEFAULT" NOHREF>.- Con esta etiqueta estamos definiendo que el área restante "DEFAULT" no tendrá enlace. Se puede cambiar la palabra "DEFAULT" por coordenadas.
</MAP>.- Con esta etiqueta cerramos el mapa.
<IMG SRC="pics/imgmap.gif" USEMAP="#mapa" border=0>.- Aquí definimos la imagen que servirá como mapa al asignarle el nombre "mapa" así como su ubicación.
 |
||
| . | Indice | . |
 |
||