La edición electrónica

Mapas sensitivos

Un mapa sensitivo es una imagen que tiene definida una serie de zonas "sensibles" que, al hacer clic sobre ellas con el ratón, llevan a cabo una acción concreta determinada por nosotros. Generalmente se utilizan como método intuitivo de navegación, y se muestran como barras de navegación, mapas geográficos o cualquier imagen que se desee y que tenga una funcionalidad sensitiva.

Hay dos tipos de mapas sensitivos:

Mapas interactivos de modo local, que actúan totalmente a partir de la página local que es llamada por el navegador.
Mapas interactivos de modo servidor, que actúan en una parte cliente (la imagen del mapa que se muestra en pantalla), y las coordenadas de acción (almacenadas en un fichero remoto del servidor).

Los mapas sensitivos no son más que imágenes, normalmente en formato GIF o JPEG, que disponen de una serie de coordenadas sensitivas en el puntero del ratón y llevan asociada una serie de acciones. Por lo general, serán nodos a otras páginas, imágenes, ficheros, etc.

Como hemos visto, hay dos formas de hacer mapas sensitivos, pero nosotros nos limitaremos a ver aquellos sobre los cuales tenemos un control total y no dependemos del servidor. Hoy día la mayoría de los navegadores cliente está preparada para admitir de forma correcta la visualización y el funcionamiento de mapas sensitivos en un ámbito cliente.

Para generar un mapa, lo que haremos será incluir en una página web los diferentes mandos propios del fichero que contiene las coordenadas de las diferentes áreas que lo definen, los nodos hipertextuales que definimos y el propio código de la página:

En primer lugar, seleccionaremos la imagen y la declararemos como mapa con un nombre concreto. Por el ejemplo, lo denominaremos prueba.

<IMG SRC="nombre de la imagen.gif" USEMAP="#prueba">

Llamaremos a la función del mapa que acabamos de generar.

<MAP NAME="prueba">

Definiremos las zonas sensitivas del mapa, y asignaremos los vínculos de cada una de ellas.

<AREA SHAPE="forma de la zona" COORDS="coordenadas" HREF="URL asignado" ALT="comentario">
Por último, cerramos la sentencia del mapa.

</MAP>

Como vemos, la definición de mapa cliente está limitada por la directiva <MAP> y </MAP>, con su atributo NAME, donde definimos un nombre para el mapa. Dentro de esta sentencia, se inserta el código sensitivo con las directivas <AREA> que contienen diferentes atributos:

SHAPE="tipo": indica qué tipo de área o forma geométrica de área se definirá en el mapa. Las más comunes son:

RECT(área rectangular), donde se especifican las coordenadas del lado superior izquierdo y el lado inferior derecho.

POLY(área poligonal), donde se deben especificar las coordenadas de todos los vértices del polígono, donde el primero debe coincidir con el último para que sea una secuencia válida.

CIRCLE(área circular), donde se debe especificar primero las coordenadas del centro y a continuación el radio en valor de puntos.
COORD="valor de las coordenadas", indica la dirección, separada por comas y sin espacio entre ellas, de la figura que incluye el atributo SHAPE o el área que define.
HREF="URL", indica el nodo al que se accederá cuando se haga clic con el ratón encima de una zona sensitiva.

La forma de un mapa sensitivo en código puede ser algo como éste, y variará en función de la cantidad de zonas sensitivas y las funcionalidades que se le apliquen, como por ejemplo asociaciones con Javascript. De todas formas, pensad que contamos con diferente software para hacer que esta tarea sea mucho más fácil de lo que a priori puede parecer, como ocurre en el caso de Map This:

Código HTML:

Para FrontPage Express:

<!--webbotbot="ImageMap"
circle="(70,106) 30 mapcircle.htm"
rectangle="(111,32) (177,78) maprect.htm"
polygon="(75,25) (31,69) (12,11) mapol.htm"
Src="../../../imgc/shapes.gif" width="200" height="150" border="0" NAME="shapes"
ALT="Ejemplo de mapa sensitivo" align="center" - - >