Mapas de imágenes en HTML

Esta técnica se basa en hacer de una imagen un mapa sensitivo mediante el cual, y dependiendo de la zona de la imagen por la que pasemos el cursor, podemos definir diferentes enlaces.

Básicamente existen 2 métodos para generar mapas de imágenes sensitivos, los mapas procesados en el servidor y los procesados en la máquina cliente (navegador).

El primero tipo (procesados en servidor) se denomina método ISMAP, y se basa en la utilización de un fichero en nuestro servidor que define las diferentes coordenadas de las zonas sensitivas de la imagen.

Un ejemplo sería:

<a href ="http://www.miservidor.com/cgi-bin/mapa1.map">
<img src="mapa1.gif" ismap border="0">
</a>

En el fichero mapa1.map estarían definidas las coordenadas de los enlaces de la imagen sensitiva mapa1.gif , de manera que cuando hacemos click sobre la imagen, lo habremos hecho sobre unas coordenadas determinadas de la misma, las cuales son enviadas al servidor y en función de estas se consulta el fichero mapa1.map y se halla la dirección final del enlace. El procesamiento de este tipo de mapas se realiza a través de un script en el servidor.

Existen 2 formas de definir el fichero .map (que contiene las coordenadas de los enlaces sensitivos) en función del tipo de servidor:

Servidores tipo NCSA :

default http://www.servidor.com
polygon http://www.servidor.com/dir1/ 100,0 150,50 100,150 50,50
rectange http://www.servidor.com/dir2/ 50,100 100,300
circle http://www.servidor.com/dir3/ (100,200) 50
point http://www.servidor.com/dir4/ 100,100

Servidores tipo CERN :

default http://www.servidor.com
polygon (100,0) (150,50) (100,150) (50,50) http://www.servidor.com/dir1/
rectange (50,100) (100,300) http://www.servidor.com/dir2/
circle (100,200) 50 http://www.servidor.com/dir3/

En ambos tipos de servidores el fichero de mapa (.map) debe encontrarse en el directorio de ejecución del script, y siempre el origen de coordenadas es "arriba a la izquierda"=punto (0,0).

El segundo tipo de mapas de imágenes es el definido por el cliente, también denominado USEMAP. En este segundo tipo de mapas sensitivos la definición del mismo se realiza dentro del código del documento, es decir, en el propio HTML.

Veamos un ejemplo:

Primero de todo debemos definir las areas del mapa:

<map name="mapa1">
<area shape=poly coords="100,0,150,50,100,150,50,50" nohref>
<area shape=rect coords="50,100,100,300" href="pag2.html">
<area shape=circle coords="30,20,15" href="pag3.html" target="_blank">
<area shape=default href="pag4.html">
</map>

Y la forma de utilizar una imagen con este mapa sería:

<img src="mapa1.gif" usemap="pag1.html#mapa1">

El origen de coordenadas (0,0) en este tipo de mapas también se encuentra "arriba a la izquierda" de la imagen.

A continuacion vemos una tabla comparativa de los 2 tipos de mapas sensitivos:

	Mapas ISMAP	Mapas USEMAP
Se necesita	- Script en servidor - Fichero .map	nada
Formas geométricas que admite	- Rectángulos - Círculos - Polígonos - Puntos (sólo en NCSA) - Area por defecto	- Rectángulos - Círculos - Polígonos - Area por defecto
Origen de coordenadas (0,0)	- Arriba a la izquierda	- Arriba a la izquierda
Tipos de enlaces admitidos	- Relativos y absolutos	- Relativos y absolutos

Como vemos, en la práctica es más aconsejable el uso de mapas sensitivos basados en el navegador del cliente (USEMAP), ya que permiten una administración y creacción más simple, con características similares a los mapas del tipo ISMAP.

VitaminaWEB.com 2001-2008
[Portada] · [Datos legales] · [Buzón de contacto] · [Mapa de la web]

Enlaces patrocinados:
Gratis | Concursos | Juegos | Casino online

Hosting recomendado:
Alojamiento web Grito.net