Mapas de imagen en HTML: Distintos links en una única imagen

Hemos visto anteriormente dos maneras distintas de enlazar una página con otra: por medio de un enlace de texto  o por medio de una imagen . Pero en este último caso se hacía uso de una imagen para enlazar a una única página.

Se puede utilizar una única imagen para enlazar con varias páginas, yendo a una u otra según la zona en donde se pulse el ratón. Este tipo de imágenes se llaman mapas.

Veremos cómo se crea un mapa partiendo de una imagen, y cómo se implementa dicho mapa con el lenguaje HTML en nuestra página.

 

Hay dos tipos de mapas:

 

1. Mapas gestionados por el servidor
2. Mapas gestionados por el cliente

 

Mapas gestionados por el servidor

En este tipo de mapas al desplazar el cursor sobre la imagen que forma el mapa se van obteniendo las distintas coordenadas. Cuando se pulsa el ratón en un punto determinado, el navegador envía esas coordenadas al servidor, y éste comprueba en un fichero MAP (situado en en su directorio cgi-bin) cuál es la página que se corresponde con estas coordenadas, envía esta información al navegador, y éste solicita a su  vez  al servidor que le enlace con dicha página.

 

Estos mapas, que fueron los que aparecieron inicialmente, tienen una ventaja: que pueden ser utilizados por todos los navegadores, incluso por las versiones más antiguas.

 

Pero tienen varios inconvenientes: No todos los servidores tienen implementado el programa CGI necesario para que pueda funcionar un mapa de este tipo. Además hay que conocer el tipo de servidor (NCSA, el más común, o CERN), pues el código a aplicar es distinto en un caso u otro.. Por otra parte, al requerir un trasiego de información entre el navegador y el servidor, el tiempo de respuesta es mayor que en el otro tipo, como veremos.

 

Mapas gestionados por el cliente

Estos mapas son gestionados por el cliente (es decir, nuestro navegador) y no por el servidor, como en el caso anterior.

 

En este tipo de mapas, al ir desplazando el cursor se observa que en ciertas zonas se convierte en el símbolo normal para enlazar con otras páginas (una mano, habitualmente). Si se pulsa en estas zonas activas (hotspots), el navegador consulta con el documento HTML que ha recibido, y decide a qué página o dirección corresponde esa zona activa.

 

Es decir, no necesita enviar la información al servidor y esperar la respuesta de éste, con lo que el proceso es más rápido que en el caso anterior, reduciéndose además el tráfico de datos y la sobrecarga al servidor. Otras ventajas son que al pasar por una zona activa se muestra la dirección a la que se corresponde (al contrario que en el caso

 

 

anterior, en la que sólo se ven unas coordenadas). Además, estos mapas se pueden utilizar off-line, al contrario también que en el otro tipo, ya que no requieren la ayuda del servidor.

Pero tiene el inconveniente de que estos mapas no son implementados por todos los navegadores, como en el caso anterior, aunque sí por la mayoría de los utilizados actualmente, desde las versiones siguientes: Netscape 2.0, Microsoft Explorer 2.0, Mosaic 2.1, etc. Pero se puede obviar este inconveniente suministrando enlaces alternativos para los navegadores que no implementen este tipo de mapas, como veremos.

 

En lo que sigue, vamos a ver exclusivamente cómo implementar este  tipo  de mapas, es decir, mapas gestionados por el cliente (client-side image maps).

 

 

Confección de la imagen del mapa

Antes que nada, es necesario confeccionar la imagen que va a servir como mapa. Se hará con un programa gráfico, y pueden utilizarse los formatos GIF o JPG (ver el capítulo 9).

 

Vamos a crear una mapa para utilizarlo en el ejemplo práctico de este capítulo, con dos zonas activas rectangulares que enlancen con los ejemplos prácticos de los capítulos 2 y 3.

 

 

Código HTML para definir un mapa gestionado por el cliente

En este caso, el código que debemos escribir es el siguiente:

<MAP NAME=»mi_mapa»>

<AREA SHAPE=»RECT» COORDS=»46,40,250,75″ HREF=»mipag2.html»>

<AREA SHAPE=»RECT» COORDS=»46,100,250,135″ HREF=»mipag3.html»>

<AREA SHAPE=»DEFAULT» NOHREF>

</MAP>

<IMG SRC=»pulsadr1.gif» USEMAP=»#mi_mapa»>

 

<MAP NAME=»mi_mapa»>

Esta es la etiqueta de apertura del mapa, y en donde se define su nombre.

<AREA SHAPE=»RECT» COORDS=»46,40,250,75″ HREF=»mipag2.html»>

Esta etiqueta define la primera zona activa. Se indica que su forma (shape, en inglés) es rectangular, y que las coordenadas de su ángulo superior izquierdo son (46,40), y que las del ángulo inferior derecho son (250,75). A continuación se indica cuál es enlace que se desea obtener, en este caso con la página mipag2.html.

<AREA SHAPE=»DEFAULT» NOHREF>

Con esta etiqueta se define el área completa del mapa, indicando que su forma es la que tiene por defecto (default), o sea 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, haciendo uso del mismo tipo de instrucciones que las de las zonas activas.

A continuación se indica, con NOHREF, que el área completa de la imagen es una zona no activa, excepto en las áreas definidas anteriormente como activas.

</MAP>

Etiqueta de cierre del mapa.

<IMG SRC=»pulsadr1.gif» USEMAP=»#mi_mapa»>