Webs

MAPAS

Desplaza el ratón sobre la Imagen, existen zonas: 'Mi Pueblo', 'Hoces Duratón', 'Abeto1', 'Abeto2', donde aparece (la mano) el símbolo normal para enlazar con otras páginas.

Desde una imagen se crea un mapa, y veremos cómo se implementa dicho mapa con el lenguaje HTML en la página web. 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, cuando se desplazar el cursor sobre la imagen que forma el mapa se van obteniendo las distintas coordenadas. Al hacer clik con el ratón en un punto determinado, el navegador envía esas coordenadas al servidor, y éste comprueba en un fichero MAP (situado en el 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.

Inicialmente aparecierón estos mapas, tienen la ventaja que pueden ser utilizados por todos los navegadores. Por el contrario, tienen varios inconvenientes: <a> No todos los servidores tienen implementado el programa CGI necesario para que pueda funcionar un mapa de este tipo. <b> Es necesario conocer el tipo de servidor (NCSA, el más común, o CERN), dado que el código a aplicar es distinto en un caso u otro.

Señalar que, al requerir un trasiego de información entre el navegador y el servidor, el tiempo de respuesta es mayor que en los mapas gestionados por el cliente.

Información sobre este tipo de mapas: The Imagemap Help Page

Mapas gestionados por el cliente

Estos mapas son gestionados por el navegador (el cliente) y no por el servidor.

Cuando se va desplazando el cursor ciertas zonas se convierten en el símbolo normal para enlazar con otras páginas (una mano). Al hacer clik con el ratón sobre 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.

Este tipo de mapas, presenta varias ventajas: <a> 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. <b> 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). <c> Se pueden utilizar 'off-line' , al contrario también que en el otro tipo, ya que no requieren la ayuda del servidor.

En adelante, se trata exclusivamente de cómo implementar mapas gestionados por el cliente 'client - side image maps'.

DISEÑAR MAPAS

1º > Se diseña una imagen que va a servir como mapa. Se hace con un programa gráfico, conviene utilizar formatos GIF o JPG.

Con el programa gráfico que se ha construido la imagen, se obtiene las coordenadas del área activa rectangular donde se ha introducido texto: "Mi Pueblo" y "Hoces Duratón".

Primera zona activa, "Mi Pueblo" ý coordenadas: (107, 10) y (224, 40)

Segunda zona activa, "Hoces Duratón" ý coordenadas: (98, 174) y (260, 214)

También se obtiene, el área activa de los dos abetos, aquí no se ha introducido texto:

zona activa circular, "Abeto1" ý coordenadas: (81, 222, 30)

zona activa rectangular, "Abeto2" ý coordenadas: (222,197) y (251,163)

Zonas activas

La imagen 'parcela-fuente1.gif' no es un mapa

u Rectangular: (a, b) y (c, d)

(a, b): coordenadas ángulo superior izquierdo.

(c, d): coordenadas ángulo inferior derecho

u Circular: (a, b, r)

(a, b): coordenadas de su centro.

r: longitud de su radio.

Definir Mapa gestionado por el cliente

Al ir desplazando el ratón sobre ciertas zonas activas: 'Mi Pueblo', 'Hoces Duratón', 'Abeto1', 'Abeto2', aparece (la mano) el símbolo normal para enlazar con otras páginas.

La imagen se convierte en mapa cuando se introduzca el código html que aparece abajo.

El código que se debe escribir:

<IMG SRC="parcela-fuente1.gif" USEMAP="#parcela-fuente">

Etiquetas - Utilidad

<map name="parcela-fuente"> .- Etiqueta de apertura del mapa, y en donde se define su nombre.

<area shape="rect" coords="107,10,224,40" href="joseantonio.html" title="Fuenterrebollo"> .- Define la primera zona activa. Se indica que su forma (shape, en inglés) es rectangular: las coordenadas de su ángulo superior izquierdo son (107,10), y las del ángulo inferior derecho son (224,40). A continuación, el enlace que se desea obtener: 'joseantonio.html' y el Título que aparecerá al pasar el ratón: 'Fuenterrebollo'

<area shape="default" NOHREF >.- Esta etiqueta se el area completa del mapa, indica que su forma es la que tiene por defecto [default], rectangular. Cuando se desea que el mapa no abarque la totalidad de la imagen, o incluso que tenga 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, adviértase que en lugar de la etiqueta NOHREF se indica todo el rectángulo [coords="0,0,345,232"], excepto en las áreas definidas anteriormente como activas.

</MAP>.- Etiqueta de cierre del mapa.

<IMG SRC="parcela-fuente1.gif" USEMAP="#parcela-fuente">.- La etiqueta solicita primero al servidor que envíe una imagen llamada parcela-fuente1.gif. Con USEMAP="#parcela-fuente" se indica que esta imagen es el mapa definido anteriormente con ese nombre, y que debe actuar en consecuencia a las pulsaciones del ratón, solicitando un enlace determinado en las zonas activas, o no haciendo nada en el resto.

RESUMEN ZONAS ACTIVAS

área activa rectangular: <area shape="rect" coords="a, b, c, d" href=" ---- ">. En donde, (a, b) son las coordenadas del ángulo superior izquierdo; (c,d) las coordenadas del ángulo inferior derecho.

área activa circular: <area shape="circle" coords="a, b, r" href=" ----">. En donde, (a, b) son las coordenadas del centro; r es la longitud de su radio.

área activa poligonal: <area shape="polygon" coords="a, b, c, d, e , f" href=" --">. En donde, (a, b), (c, d), (e, f), etc. son las coordenadas de los distintos puntos.

EDITORES DE MAPAS

Existen programas que una imagen en un mapa de una manera automática. Partiendo de una imagen, con este tipo de programas no hay más que señalar con el ratón qué áreas se desean que sean activas (y qué forma deben tener) e indicar los enlaces para cada zona activa. Entonces, 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.

Programas

Para PC y Unix: Mapedit.

Otros para crear mapas: herramientas