Imágenes mapa en el cliente

Este tipo de imágenes reciben el nombre de imágenes mapa en el cliente porque será el navegador de cada usuario (cada cliente) el que se encargará de leer el código cuando se pulsa sobre la imagen mapa y averiguar la dirección de destino. No es necesario ningún programa especial en el servidor Web.

En este caso nos bastará usar la etiqueta IMG para crear la imagen, eso sí con un nuevo atributo: USEMAP . Por otro lado ahora deberemos usar algunas otras etiquetas nuevas para crear el mapa de la imagen. La creación de este tipo de imágenes mapa consta por tanto de dos pasos:

1. Definición de la imagen como imagen mapa, así como informar de dónde está el mapa a usar. La sintaxis es sencilla:

La imagen es, en este caso, una con formato GIF de nombre imagen.gif. En este ejemplo usamos un mapa llamadomapa1, como vemos la forma de referirnos a él es igual que con las anclas: anteponiendo el símbolo ‘#’. En esta ocasión el mapa estará en el mismo documento HTML, pero esto no tiene porque ser así. Si, por ejemplo, usamos una imagen mapa en todas y cada una de las imágenes de un sitio Web, podemos poner el mapa en la página principal (index.htm) y después referirnos a él como:

1. Más aún, no estamos limitados a que el mapa esté en nuestro sitio Web, puede estar en cualquier lugar del WWW, para referirnos a él tendremos que poner la dirección URL de la página dónde esté seguido por un # y el nombre del mapa.
2. El segundo paso es la creación del mapa. Para ello usaremos una nueva etiqueta: MAP. Esta etiqueta tendrá una instrucción de inicio, <MAP …> , y otra de fin,</MAP> entre las cuales definiremos las diferentes zonas activas de la imagen mapa. El único atributo de esta etiqueta es el necesario para darle un nombre: NAME, y se usará de la siguiente manera:

A continuación debemos crear las formas a las que nos referíamos antes. Para llevar a cabo esta labor usaremos otra etiqueta más: AREA que deberá ser una vez para cada zona de la imagen mapa y que consta de cuatro atributos:

• HREF: Este atributo es idéntico al del mismo nombre de la etiqueta A. Con él debemos indicar la página o dirección URL a la que saltaremos cuando pulsemos sobre esta zona activa.
• ALT: Sirve para incluir un texto alternativo.
• SHAPE: Define la forma de la zona, puede tener tres valores: rect (zona rectangular), circle (zona circular) y  poly(zona poligonal).
• COORDS: Coordenadas de la zona, su valor depende de la forma de esta. En la figura 5.30:

Figura 5.30. En esta figura podemos ver los valores que puede tomar el atributo COORDS en función de si la zona es rectangular, circular o poligonal.

1. • podemos ver como será en función de si el valor de SHAPE es…
     • rect: COORDS toma 4 valores separados por comas que representan las coordenadas de el vértice superior izquierdo y el inferior derecho.
     • circle: COORDS toma 3 valores. Los dos primeros son las coordenadas del centro y el tercero es el radio.
     • poly: COORDS tiene un número indefinido de valores que representan las coordenadas de cada uno de sus vértices.

Como ejemplo vamos a imaginar una imagen de 300×100 y vamos a crear un mapa que la divida en dos:

No ha sido complicado, ¿no?

Las coordenadas vistas hasta ahora están dadas en pixeles. También pueden darse en porcentajes, aunque esto sólo suele ser útil para el caso de zonas rectangulares. La sintaxis a usar sería por ejemplo: COORDS=»0,0,50%,40%»

Existe un quinto atributo, NOHREF, que puede usarse en lugar de HREF para indicar que una determinada zona no debe conducir a ningún sitio al pulsar sobre ella. Este atributo no toma ningún valor.

Si dos o más zonas se superponen se impone la que fuera definida primero. Por esta razón si existe alguna zona con NOHREF suele ponerse la primera de la lista.

El problema las imágenes mapa en cliente radica en que no todos los navegadores están preparado para este tipo de imágenes mapa, y por tanto no podemos estar seguros de que todos los vistantes vayan a poder disfrutar de nuestra imagen mapa.

Siempre que usemos una imagen enlace y especialmente si esta es una imagen mapa es importante crear esos mismos enlaces con textos para que se pueda acceder a ellos con navegadores de sólo texto o por si existe algún problema con la visualización de las imágenes.

Hay que tener mucho cuidado con el uso de los atributos WIDTH y HEIGHT con las imágenes mapa, ya que la imagen variará sus dimensiones, pero el mapa no, por tanto las zonas que hayamos definido no servirán.

Fuente: Copyright Jorge Ferrer, Rodrigo Garcia y Victor García, licencia Documentación Libre GNU, Versión 1.1