El estilo dentro de la edición electrónica

Mapas sensitivos

Un mapa sensitivo es una imagen que tiene definidas una serie de zonas "sensibles"; 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 cliente, que actúan por completo a partir de la página cliente 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 con la extensión ".map").

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 asociadas 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 en día la mayoría de navegadores cliente están preparados 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

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

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

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; 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 así; 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 esta tarea mucho más fácil de lo que a priori puede parecer, como ocurre en el caso de Map This, del cual os recomendamos este tutorial:

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" - - >