Utilización de mapas de imágenes.

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)

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