Imágenes en HTML (X)
por Luciano Moreno, del departamento de diseño web de BJS Software.

Mapas de imágenes en el cliente.-

Para acabar el tema de las imágenes, vamos a estudiar qué son y cómo se construyen mapas de imágenes en HTML.

Un mapa de imagen es una imagen que tiene la propiedad de estar dividida en diferentes partes o sectores, de forma que cada una de ellas funciona como un enlace estándar HTML.

Los mapas de imágenes pueden ser mapas del lado cliente, en los que el código necesario para la definición de las diferentes partes de la imagen se encuentra en la propia página que contiene el mapa, y que por lo tanto se ejecuta en el navegador cliente, y mapas del lado servidor, en los que éste código se encuentra en una escritura de script en un fichero del servidor web.

Sin duda alguna los más empleados son los del lado cliente, que son los que vamos a estudiar aquí, ya que los del lado servidor precisan para su implementación permisos especiales en el servidor web, permisos que son difíciles de obtener.

Un mapa de imagen  en el lado cliente precisa para su implementación en una página web de dos partes. Por un lado necesitamos definir el mapa en sí, para lo cual se usa la etiqueta siguiente:

<MAP NAME="nombre_mapa">
<AREA SHAPE="rect / circle / poly / default" COORDS="x1,y1,x2,y2,......." HREF="enlace1.html">
<AREA SHAPE="rect / circle / poly / default" COORDS="x1,y1,x2,y2,......." HREF="enlace2.html">
....
<AREA SHAPE="rect / circle / poly / default" COORDS="x1,y1,x2,y2,......." HREF="enlaceN.html">
</MAP>

en donde:

1) nombre_mapa es un nombre identificador único que damos a cada mapa.

2) SHAPE establece la forma que va a tener cada área de enlace (rectángular, circular, poligonal o por defecto).

3) COORDS define las coordenadas de los sucesivos puntos que forman la forma establecida en SHAPE. Así, si elegimos una forma rectángular deberemos dar las coordenadas de los vértices superior izquierdo e inferior derecho del rectángulo, si es una forma circular daremos las coordenadas del centro del círculo y la longitud del radio, y si es una forma poligonal deberemos especificar las coordenadas de los sucesivos puntos que forman el polígono.

4) HREF asigna el enlace al que lleva cada una de las áreas definidas en el mapa.

Una vez definido el mapa deberemos asignarlo a la imagen en concreto a la que debe mapear, lo que conseguimos mediante el atributo USEMAP de la etiqueta IMAGE:

<IMG SRC="ruta" WIDTH="anchura" HEIGHT="altura" BORDER="0" ALT="texto" USEMAP="#nombre_mapa">

Nota la almoadilla (#) delante del nombre del mapa en USEMAP. Si no la pones, el mapa no funciona.

Sea, por ejemplo, la siguiente imagen, en la que deseamos establecer dos áreas activas, representadas por los rectángulos blancos, y en la que mediante un programa cualquiera de diseño gráfico (Paint Shop Pro en este caso) hemos obtenido las coodenadas correspondientes a sus vertices definitorios.

La etiqueta MAP nos quedaría:

<map name="cuadro">
<area shape="rect" coords="29,68,83,120" href="javascript:alert('primer enlace');" title="primer enlace">
<area shape="rect" coords="85,34,144,87" href="javascript:alert('segundo enlace');" title="segundo enlace">
</map>
<img src="images/mapa.jpg" width="176" height="250" border="0" alt="ejemplo de mapa de imagen" usemap= "#cuadro">

Donde como enlaces hemos puesto una llamada a un método alert de JavaScript, que nos sacará una ventana flotante con un mensaje determinado. Para que el enlace séa a una página en concreto, basta sustituir esta llamada por la ruta de la página a la que queremos enlazar. El resultado del código anterior es el siguiente:

Observa cómo al situar el cursor encima de cada una de las áreas definidas este pasa a ser una mano, como ocurre en cualquier enlace estándar, y que como hemos añadido a cada uno el atributo title, en Internet Explorer y en Nestcape Navigator 6x aparecerá un bocadillo flotante con un texto explicatorio de cada enlace en concreto.