Mapas de Imagenes

Mapas de Imagen

En los mapas de imagen, diferentes partes de una imagen activan vínculos distintos.

Ésto permite implementar metáforas visuales adecuadas para una presentación: libros en un estante, provincias en un mapa, personas en una fotografía, etc.

Este tipo de páginas no puede organizarse en navegadores de texto (con el atributo <ALT>), y por lo tanto requiere que se cree una página alternativa para dichos casos.

Cuando la imagen es seleccionada (pinchda) por el cliente, se generan las coordenadas elegidas dentro de la imagen.

Si el mapeo se efectúa en el servidor, entonces dichas coordenadas son transmitidas a un script utiliza dichos datos para decodificar la URL correspondiente.

Si el mapeo se efectúa en el cliente, es necesario que el navegador esté en condiciones de manejar imágenes mapeadas. Usualmente las zonas mapeadas son círculos y polígonos.

El mapeo en el cliente siempre es más rápido que en el servidor.

El mapeo en el servidor puede tener una precisión arbitraria.

Mapas de Imagen en el Servidor

Si el mapa de imagen se realiza en el servidor, entonces el envío de los datos se realiza de manera similar a un formulario.
El atributo ACTION del formulario establece el paso al script que efectúa el mapeo.
El atributo TYPE de la etiqueta <INPUT> es IMAGE .


<FORM ACTION=/cgi-bin/mapaimg>
<INPUT NAME="imagen" TYPE="IMAGE"
   SRC="../../imagenes/figura.jpg" ALIGN=TOP>
</FORM>

Mapas de Imagen en el Cliente

Si la imagen se mapea en el navegador, entonces éste necesita una especificación de los lugares de la imagen asociados a cada URL.
En el siguiente ejemplo se muestra la definición de un mapa de imagen constituido por dos secciones gráficas rectangulares, cada una asociada a una marca diferente de un documento.
El mapa es luego referenciado por una imagen externa, sobre la cual se efectúa el ingreso de datos.

<MAP NAME="Mapa1">
 <AREA SHAPE=RECT COORDS = "1,1,69,85"
       HREF="documento.htm#mapa1">
 <AREA SHAPE=RECT COORDS = "71,1,139,85"
       HREF="documento.htm#mapa2">
</MAP>
<IMG USEMAP=#Mapa1> SCR="mapa1.jpg"
    ALT="mapa de imagen">

El atributo NAME de la etiqueta <MAP> permite darle un nombre al mapa de imagen.
Los atributos de <AREA> permiten asociar un sector geométrico SHAPE con una URL. Los sectores geométricos definidos hasta ahora son:
1. RECT (coord. superior izquierda, coord. inferior derecha)
2. POLYGON (coordenadas de la poligonal)
3. CIRCLE (centro y radio)

Ir a página principal.

Página anterior (Programación de Formularios).