Hay dos maneras distintas de enlazar una página con otra: por medio de un enlace de texto o por medio de una imagen.
Podemos usar una imagen para enlazar a una sola página o bién utilizar una única imagen para enlazar con varias páginas, yendo a una u otra según la zona donde se pulse con el ratón. Este segundo tipo de imágenes se llaman mapas.
Hay dos tipos de mapas:
Estos mapas, que fueron los que aparecieron inicialmente, tienen la ventaja de que pueden ser utilizados por todos los navegadores, incluso por las versiones más antiguas. No obstante tienen varios inconvenientes:
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, reduciéndose además el tráfico de datos y la sobrecarga al servidor.
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). Estos mapas se pueden utilizar off-line, al contrario también que el otro tipo, ya que no requieren la ayuda del servidor.
Ejemplo: Vamos a crear un mapa sensitivo gestionado por un cliente.
En primer lugar, es necesario crear la imagen que va a servir como mapa. Lo haremos con un programa gráfico, y pueden utilizarse los formatos GIF o JPG.
Vamos a crear un mapa para utilizarlo en el ejemplo práctico
de este capítulo, con cuatro zonas activas: tres rectangulares y
otra mixta. Para ello, se confecciona con un programa gráfico, la
imagen que nos va a servir como mapa, tal como la siguiente (que todavía
no lo es).
Para definir un área activa necesitamos conocer las coordenadas
de su ángulos o vértices. Estas coordenadas las obtenemos
con el programa gráfico con el que hemos confeccionado la imagen.
En este caso asumimos que los valores de los vértices son los siguientes:
Para la primera zona activa "Zona 1": (3,4) y (73,79)
Para la segunda zona activa "Zona 2": (4,82) y (95,193)
Para la tercera zona activa "Zona 3":(75,4) ,(177,4), (175,120) ,(97,120),
(97,79), y (75,77)
Para la cuarta zona activa "Zona 4": (97,124) y (176,194)
Ya tenemos los datos necesarios para escribir el código HTML que convierta esta imagen en un mapa. El código es el siguiente:
<MAP NAME="zonas.gif">
<AREA SHAPE="RECT" COORDS="3,4,73,79" HREF="zona1.htm">
<AREA SHAPE="RECT" COORDS="4,82,95,193" HREF="zona2.htm">
<AREA SHAPE=RECT COORDS="97,124,176,194" HREF=zona3.htm>
<AREA SHAPE=POLY COORDS="75,4,177,4,175,120,97,120,97,79,75,77,75,4"
HREF=zona4.htm>
<AREA SHAPE="default" HREF=cap154.htm>
</MAP>
Además es necesario incluir una referencia a la imagen:
<A HREF="zonas2.map"><IMG ISMAP SRC="zonas.gif" BORDER=0 USEMAP="#zonas.gif"
></A>
Veamos ahora cada una de las etiquetas:
<MAP NAME="zonas.gif"> Esta es la etiqueta de apertura del mapa, donde se define su nombre.
<AREA SHAPE="RECT" COORDS="3,4,73,79" HREF="zona1.htm"> Esta etiqueta define la primera zona activa. Se indica que su forma (shape, en inglés) es rectangular, y que las coordenadas de sus vértices son las que se señalan con comillas. A continuación se indica el enlace, es decir el fichero al que se quiere acceder: "zona1.htm".
Las siguientes etiquetas son análogas. En el caso de la
zona3 tenemos un poligono no uniforme con más vértices.
<AREA SHAPE="default" HREF=cap154.htm> Con esta etiqueta se
define el área completa del mapa, de modo que si se selecciona fuera
de las zonas anteriores pueda seleccionarse también algún
destino. Si ponemos NOHREF, estamos indicando que el área completa
de la imagen es una zona no activa, exceptuando en las áreas definidas
anteriormente como activas.
</MAP> Etiqueta de cierre del mapa.
<A HREF="zonas2.map"><IMG ISMAP SRC="zonas.gif" BORDER=0 USEMAP="#zonas.gif" ></A> Con estas etiquetas se solicita primero al servidor que envíe una imagen llamada zonas.gif. Con USEMAP="#zonas2.map" se indica que esta imagen es el mapa definido anteriormente con ese nombre. Esta debe actuar en consecuencia dependiendo de las pulsaciones del ratón, solicitando un enlace determinado en las zonas activas, o no haciendo nada en el resto.
El resultado es el siguiente:
Enlaces Alternativos de Texto
Como se ha dicho anteriormente, no todos los navegadores incorporan
este tipo de mapas gestionados por el cliente. Por ello, es necesario suministrar
unos enlaces alternativos convencionales de texto, para solventar este
inconveniente.
Por ejemplo, después del mapa, se pueden poner estos dos enlaces
de texto, correspondientes a las dos zonas activas (reduciendo la fuente,
para hacerlo menos antiestético):
<FONT SIZE=-1>
<A HREF="zona1.htm">Zona 1</A> | <A HREF="zona2.htm">Zona
2</A> | <A HREF="zona3.htm">Zona 3</A> |<A HREF="zona4.htm">Zona
4</A>
</FONT>
Este trozo de código se coloca normalmente a continuación
del mapa y centrado. El resultado es:
Zonas Activas en Forma de Círculos:
También se pueden definir estas zonas activas como círculos.
Para ello es necesario conocer las coordenadas de su centro (x,y) y la
longitud de su radio (r). Una vez conocidos estos datos, la etiqueta es
como sigue:
<AREA SHAPE="CIRCLE" COORDS="x,y,r" HREF="dirección_de_la_página">
Programas Editores de Mapas
Hemos visto cómo se debe escribir el código HTML para
convertir una imagen en un mapa. Pero hay programas que lo hacen de una
manera automática.
Partiendo de una imagen, (confeccionada con un programa gráfico normal), podemos señalar con el ratón, qué áreas deseamos que sean activas, qué forma deben tener e indicar los enlaces para cada una de estas zonas. A continuación, el programa escribe todo el código HTML de una forma automática, sin necesidad de tener que suministrar los datos de las coordenadas de cada zona activa.
Entre los editores de mapas más usados puedes encontrar: MapEdit
y MapThis (para windows)