HTMLpointHTMLpoint HTMLpoint.com


 <MAP> elaborar mapas "clicables"



Los mapas "clicables" hicieron su entrada en el web publishing hace ya mucho tiempo, desde las primeras versiones del HTML. Se trata de elementos de uso muy frecuente debido a su facilidad de empleo y a su evidente utilidad.
El concepto de mapa clicable es simple y parte de una constatación igualmente simple: a menudo asociar un solo enlace a una entera imagen limita al diseñador de web, que podría, en cambio, enlazar distintas páginas explotando así al máximo el bagaje gráfico individual. Los mapas clicables superan esta limitación y permiten, dentro de una imagen individual, crear diversas áreas de recorte, cada una de ellas con un enlace diverso. El concepto fundamental en que se fundan los mapas clicables es el de las coordenadas que pueden indicar al navegador puntos precisos de la imagen. Existen dos tipos de mapas pero, antes de pasar a describirlos, hay que recordar que el uso de extensiones GIF o JPG no influye y no provoca ninguna incompatibilidad.

Mapas gestionados por el servidor (ISMAP)

A fin de que estos mapas funcionen, es necesario que en tu servidor haya las extensiones CGI necesarias. Se trata de programas que puedes bajar gratis de la red y que puedes encontrar recopilados en CGIpoint.it.
Los ISMAP, término técnico con que se designa este tipo de mapas, individuan las coordenadas de la imagen a través de un archivo externo. Los URL creados por los ISMAP van seguidos del valor de las coordenadas x e y separadas por una coma y precedidas de un signo de cierre de interrogación. He aquí un ejemplo:

http://www.htmlpoint.com/cgi-bin/menu.map?25,55

Este URL indica que en el punto x=25 e y=55 el enlace es el establecido dentro del ISMAP.

Mapas gestionados por el cliente (USEMAP)

Los mapas gestionados por el servidor no gozan de una gran difusión, sobre todo debido a la posibilidad de obtener resultados idénticos utilizando un procedimiento gestionado por el cliente. Nos referimos a los USEMAP, es decir a los mapas que son interpretados sin la intervención del servidor. La sintaxis correcta que HTML usa para insertar USEMAP en un documento es la siguiente:

<IMG SRC="img/home/menu.gif" WIDTH=609 HEIGHT=87 BORDER=0 usemap="#menu">

donde la primera parte del código hace un llamamiento de la imagen y determina su dimensión, mientras que #menu indica el nombre del archivo (con extensión .map) que contiene la información sobre las coordenadas. Dicho de otro modo, los USEMAP no hacen sino llamar un archivo externo que, por cada enlace de la imagen, indica un correspondiente URL. Lo que sigue es el contenido de un archivo con extensión .map (se puede editar de manera muy sencilla, incluso con un bloc de notas de Win95).
Para comprender mejor el funcionamiento de un USEMAP, consideremos la imagen siguiente:



Hipoticemos que queramos crear tres diferentes enlaces de imagen para cada uno de los tres elementos gráficos: la bicicleta, el ratón y los bomberos. Si utilizaramos un anclaje de imagen normal, tendríamos un único enlace para todos los elementos gráficos. Con un USEMAP, por el contrario, es posible crear tres diferentes áreas de enlace para cada una de las imágenes.
El código así generado se inserta dentro del mismo documento:

<map name="06a">
<area shape="poly" alt="Ésta es una biclicleta" coords="69,26,47,25,52,15,31,15,27,19,35,28,37,34,34,39,20,37,12, 44,7,51,5,57,5,65,8,71,9,75,16,79,24,81,31,81,40,79,44,73,50,67, 55,65,65,56,65,66,68,72,73,79,91,84,98,80,110,64,106,53,100,43,87, 37,82,38,75,23,85,24,82,17,68,17,71,25,71,25,71,25,71,25" href="bicicletta.htm" title="Ésta es una bicicleta">

<area shape="poly" alt="Esto es un ratón" coords="181,27,172,14,163,10,150,14,136,23,136,34,128,40,123,32,112, 31,115,42,121,52,132,54,139,49,146,38,150,33,152,48,148,64,153,80, 161,82,172,82,180,76,183,53,181,34,181,24,181,25" href="mouse.htm" title="Esto es un ratón">

<area shape="rect" alt="Coche de bomberos" coords="207,7,279,82" href="pompieri.htm" title="Coche de bomberos">

<area shape="default" nohref>
</map>


El código está contenido dentro de las marcas MAP, que abren y cierran la sintaxis. Las tres áreas de recorte son generadas por tres respectivos campos AREA. Existen tres maneras diferentes para recortar una imagen:
poly: recorta imágenes desiguales mediante líneas rectas
rect: recorta áreas cuadradas o rectangulares, de 4 lados
circle: recorta áreas circulares

En nuestro ejemplo aparecen áreas de recorte poly y rect.
Los comentarios de cada área de recorte son generados por los campos title y alt y hacen que el navegador visualice texto descriptivo para cada una de las áreas del enlace.

Una vez elaborado el código, es necesario insertar dentro de la imagen una referencia al mismo. Para ello, en nuestro ejemplo hemos impostado el siguiente código:

<img src="06a.gif" width=300 height=100 border=0 alt="" usemap="#06a">

La expresión usemap="#06a" hace referencia al código impostado precedentemente y asigna a las imágenes las áreas de recorte. Crear áreas de recorte no es simple en absoluto si no se dispone de un programa adecuado a este fin que evite los cálculos a mano. La mayor parte de los editores HTML que existen en el mercado prevén generadores automáticos de mapas. Para mayores detalles, puedes consultar los archivos de ayuda de los mismos. Existen también programas destinados exclusivamente a la elaboración de USEMAP; de ellos, os aconsejamos Mapedit: de pequeñas dimensiones (algo menos de 300kb de archivo de instalación) y fácil utilización. Es un programa gratuito (shareware) con 30 días de prueba y que puedes bajar gratis de este enlace:




  Torna a inizio pagina