Como se expone en el capítulo Enlaces, se puede utilizar un texto o una imagen como elemento para enlazar a otra página.
Aunque habitualmente una imagen enlaza a un único documento, se puede utilizar una única imagen para enlazar a varios documentos. El destino del enlace dependerá de la posición del puntero en el momento de pinchar sobre la imagen. Estas imágenes se denominan mapas.
Tipos
Existen dos tipos de mapas: los gestionados por el servidor y los gestionados por el cliente.
En los mapas gestionados por el servidor se obtienen las coordenadas según se desplaza el puntero sobre la imagen. Cuando se pincha sobre la imagen, el navegador envía las coordenadas al servidor, que las procesa y obtiene cuál es el documento correspondiente. Este tipo de mapas puede ser utilizado por todos los navegadores, pero tiene diversos inconvenientes: el servidor necesita un programa CGI, según el tipo de servidor el código a aplicar será diferente, se requiere un mayor intercambio de información entre el navegador y el servidor, y el tiempo de respuesta es mayor que en los mapas gestionados por el cliente.
En los mapas gestionados por el cliente (navegador), según se desplaza el puntero se observa cuáles son las áreas activas. Cuando se pulsa sobre una de estas áreas el navegador consulta el documento HTML para decidir a qué documento corresponde, con lo cual el proceso es más rápido que en el tipo anterior y se reduce el tráfico de datos y la sobrecarga del servidor. Además, este tipo de mapas funcionan fuera de la red, pues no requieren la colaboración del servidor.
Como inconvenientes, las versiones muy antiguas de algunos navegadores no contemplan este tipo de mapas, y con conexiones lentas la descarga de una imagen grande puede resultar fastidiosa. Por estas razones conviene proporcionar enlaces alternativos.
Confección
Primero conviene diseñar la imagen que va a servir como mapa con la ayuda de un programa de tratamiento de imágenes. La sección Procesadores de imágenes ofrece una lista de programas que permiten llevar a cabo esta tarea.
Áreas activas rectangulares
Tomando la siguiente imagen:
se puede crear un mapa de ejemplo, con tres zonas activas rectangulares que enlacen con otras páginas.
Para definir cada zona activa rectangular hay que conocer las coordenadas de su ángulo superior izquierdo y las de su ángulo inferior derecho. Esta información se puede obtener con el programa de tratamiento de imágenes con el que se ha creado la imagen. Para el ejemplo actual, estos valores son los siguientes:
Para la primera área activa "Antena 3": de (3,11) a (49,51) Para la primera área activa "Canal+": de (65,17) a (187,45) Para la primera área activa "Telecinco": de (200,4) a (253,61) Con estos datos ya es posible escribir el código HTML para transformar esta imagen en un mapa. En este caso, el código correspondiente es el siguiente:
<MAP NAME="Mapa_1"> <AREA SHAPE="RECT" COORDS="3,11,49,51" HREF="http://www.antena3tv.es"> <AREA SHAPE="RECT" COORDS="65,17,187,45" HREF="http://www.cplus.es"> <AREA SHAPE="RECT" COORDS="200,4,253,61" HREF="http://www.telecinco.es"> <AREA SHAPE="DEFAULT" NOHREF> </MAP> <IMG SRC="ew_mapa1.gif" WIDTH="253" HEIGHT="61" BORDER="0" USEMAP="#Mapa_1"> |
cuyo resultado sería:
|
La etiqueta <MAP NAME="Mapa_1"> inicia el mapa y define su nombre.
La etiqueta <AREA SHAPE="RECT" COORDS="3,11,49,51" HREF="http://www.antena3tv.es"> define la primera zona activa e indica que la forma del área activa es rectangular, cuyas coordenadas de su ángulo superior izquierdo son (3,11) y las del ángulo inferior derecho son (49,51). También indica el destino del enlace, en este caso la página inicial de Antena 3 Televisión.
La etiqueta <AREA SHAPE="DEFAULT" NOHREF> define el área completa del mapa, indicando que su forma es la que tiene por defecto, o sea, rectangular. Si no se necesita que el mapa abarque toda la imagen hay que indicarlo aquí. El atributo NOHREF indica que el área completa de la imagen es una zona no activa, excepto en las áreas definidas como activas en las etiquetas anteriores.
</MAP> es la etiqueta que cierra el mapa. La etiqueta <IMG SRC="ew_mapa1.gif" USEMAP="#Mapa_1" BORDER="0"> solicita descargar la imagen ew_mapa1.gif. El atributo USEMAP="#Mapa_1" indica que esta imagen ha de funcionar como el mapa definido con ese nombre.
Áreas activas circulares
También se pueden definir las áreas activas como círculos. Para definir una zona activa circular es necesario conocer las coordenadas de su centro (x,y) y la longitud de su radio (r). Sabiendo estos datos, la etiqueta correspondiente es:
| <AREA SHAPE="CIRCLE" COORDS="x,y,r" HREF="dirección"> |
Áreas activas poligonales
Para definir una zona activa poligonal conviene saber las coordenadas de los puntos (x1,y1), (x2,y2), (x3,y3), etc. Conociendo estos datos, la etiqueta se escribe así:
| <AREA SHAPE="POLYGON" COORDS="x1,y1,x2,y2,x3,y3,..." HREF="dirección"> |
Enlaces alternativos
No todos los navegadores contemplan los mapas gestionados por el cliente. Por esta razón y porque no hay que obligar al usuario a cargar imágenes extensas conviene proporcionar unos enlaces alternativos de texto.
Por ejemplo, a continuaciación del mapa, pueden ponerse estos tres enlaces de texto, correspondientes a las tres zonas activas:
<FONT SIZE="-1"> <A HREF="http://www.antena3tv.es">Antena 3</A> | <A HREF="http://www.cplus.es">Canal+</A> | <A HREF="http://www.telecinco.es">Telecinco</A> </FONT> |
que, una vez centrado y colocado bajo el mapa, ofrecería lo siguiente:
|
