Gestión de mapas

Un mapa es una imagen que permite realizar diferentes hiperenlaces en función de la "zona" de la imagen que se pulse.

Las directivas para crear mapas son <MAP></MAP> y <AREA>.

La directiva <MAP> identifica al mapa y tiene el parámetro name para indicar el nombre del mapa.

La directiva <AREA> define las areas sensibles de la imagen. Tiene los siguientes parámetros obligatorios :

shape = "tipo"

Indica el tipo de area a definir.

coords = "coordenadas"

Indica las coordenadas de la figura indicada con shape.

href = "URL"

Indica la dirección a la que se accede si se pulsa en la zona delimitada por el area indicada.

Los tipos de area pueden ser los siguientes :

rect

Area rectangular. Se deben especificar las coordenadas de la esquina superior izquierda y las de la esquina inferior derecha.

poly

Polígono. Se deben especificar las coordenadas de todos los vértices del polígono. El visor se encarga de "cerrar" la figura.

circle

Circulo. Se debe especificar en primer lugar las coordenadas del centro del círculo y a continuación el valor del radio (en puntos).

Si dos areas se superponen, se ejecutará la que se encuentre en primer lugar en la definición del mapa. Es importante definir una última area que abarque la totalidad del gráfico para direccionar a una URL "por defecto", con el objeto de contemplar el caso de que no se pulse sobre un area definida.

Veamos un ejemplo completo.

<CENTER>
<TABLE Border=2>
<TD>
<B><MAP name =</B> "casa"<B>></B><br>
<B><AREA shape =</B> "poly" <B>coords =</B> "2,62,57,62,28,1"
<B>href=</B> "tejado.htm"<B>></B><br>
<B><AREA shape =</B> "rect" <B>coords =</B> "21,101,35,138"
<B>href=</B> "puerta.htm"<B>></B><br>
<B><AREA shape =</B> "rect" <B>coords =</B> "2,64,57,138"
<B>href=</B> "casa.htm"<B>></B><br>
<B><AREA shape =</B> "circle" <B>coords =</B> "80,76,21"
<B>href=</B> "arbol.htm"<B>></B><br>
<B><AREA shape =</B> "rect" <B>coords =</B> "78,98,85,138"
<B>href=</B> "tronco.htm"<B>></B><br>
<B><AREA shape =</B> "rect" <B>coords =</B> "0,0,96,138"
<B>href=</B> "dibujo.htm"<B>></B><br>
<B></MAP></B>
<TR>
</TABLE>
</CENTER>

Para activar el mapa debemos indicar la imagen a mostrar, indicando que dicha imagen es tratada por un mapa. Para ello escribiríamos la siguiente directiva :

<CENTER>
<TABLE Border=2>
<TD>
<B><IMG src =</B> "grafico.gif" <B>usemap =</B> "#casa"<B>></B>
<TR>
</TABLE>
</CENTER>

Si tu visor tiene la capacidad de gestionar mapas (Netscape 2.x o Ms-Explorer 2.x o superiores), prueba a pulsar sobre alguna parte del mapa que hemos definido y que te aparecerá a continuación:

<MAP name = "casa">
<AREA shape = "poly" coords = "2,62,57,62,28,1" href= "tejado.htm">
<AREA shape = "rect" coords = "21,101,35,138" href= "puerta.htm">
<AREA shape = "rect" coords = "2,64,57,138" href= "casa.htm">
<AREA shape = "circle" coords = "80,76,18" href= "arbol.htm">
<AREA shape = "rect" coords = "78,98,85,138" href= "tronco.htm">
<AREA shape = "rect" coords = "0,0,96,138" href= "dibujo.htm">
</MAP>
<CENTER>
<IMG src = "casa.gif" usemap = "#casa">
</CENTER>

Como podemos observar, el proceso mas laborioso es el de determinar las coordenadas. Existen programas como MAPTHIS que permiten realizar este proceso de una manera sencilla, simplemente definiendo las zonas con el raton. El programa MAPTHIS permite abrir una imagen tipo .GIF y marcar las zonas sensibles. Este programa creara un fichero con extension .map que contendra en su interior las coordenadas de cada area. Con esta información nos sera mucho mas facil escribir nuestro mapa. Puedes buscar este programa en Shareware.com buscando por mpths.

Autoría, licencia y acciones sobre este artículo

Informe de Roland Nava* Atención: Copyright. Este artículo no se puede reproducir sin la autorización expresa del autor. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

Añadir un comentario del artículo Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar.

Se muestra un comentario revisado

Añadir un comentario del artículo

Enlaces:

Maestrosdelweb

  Ir arriba