MAPAS

Los mapas de imágenes permiten especificar zonas dentro de una imagen u objeto y asignar una acción específica a cada una de esas zonas.Un mapa de imágenes se crea asociando un objeto con una especificación de las áreas geométricas sensibles del objeto.

Hay dos tipos de mapas de imágenes:

  • En el lado del cliente: Cuando un usuario activa con el ratón una región del mapa en el lado del cliente y las coordenadas en píxeles son interpretadas por el cliente. Éste selecciona el vínculo especificado en la región activada y lo sigue.
  • En el lado del servidor: Cuando un usuario activa una región de un mapa de imágenes en el lado del servidor y las coordenadas en píxeles son enviadas al servidor especificado por el atributo href del elemento <A>. El servidor interpreta las coordenadas y realiza alguna acción.

Son mejores los mapas del lado cliente por dos razones: son accesibles a personas que utilizan agentes de usuario no gráficos y permiten saber en todo momento si el cursor está sobre una región activa o no.

Los mapas de imágenes se crean con las etiquetas <map></map> y <area>.
Con <map></map> se especifica un mapa de imágenes en el lado del cliente. Sus atributos son:

name = texto. Este atributo asigna un nombre al mapa de imágenes.

Los atributos de <area> son:

Código Valor Descripción
shape default|rect|circle|poly Forma de una región (default=completa)
coords coordenadas SHAPE="rect": COORDS="x1, y1, x2, y2", siendo x1, y1 las coordenadas de la esquina superior izquierda y x2, y2 las coordenadas de la esquina inferior derecha.
SHAPE="circle": COORDS="xc, yc, r", siendo xc, yc las coordenadas del centro del círculo y r el radio.
SHAPE="poly": COORDS="x1, y1, x2, y2, ..., xn, yn", siendo xi, yi las coordenadas del vértice i del polígono.

Las coordenadas son relativas a la esquina superior izquierda del objeto y se especifican en píxeles.

href url dirección de la página web a la que accede si pinchamos en un área determinada.
usemap nombre del mapa asocia un mapa de imágenes con un elemento
alt texto texto alternativo para navegadores que no puedan mostrar imágenes
onFocus evento El evento onfocus ocurre cuando el foco se dirige hacia un elemento
onBlur evento El evento onblur ocurre cuando el elemento pierde el foco

Un mapa tiene dos partes:

La imagen que va a ser el mapa:
<img src="../graficos/imagenconmapa.gif" usemap="#nombre_del_mapa">

La definición del mapa y sus zonas:
<MAP NAME="nombre_del_mapa">
<AREA SHAPE="forma_del_área" COORDS="coordenadas" HREF="URL" ALT="texto_alternativo">
...
</MAP>

Ejemplo:

Código Resultado

<img src="img/sol.gif" width="148" height="118" usemap="#cielo" border="0">

<map name="cielo">

  <area shape="poly"
coords="32,82,47,55,60,71,77,51,95,64,116,53,135,72,119,87,122,106,99,114,83,96,76,107,48,110,37,97,27,106,12,105,3,87,13,70"
href="ejemplos/mapanube.html" target="_blank" alt="nube" title="nube">
<area shape="circle" coords="99,45,16" href="ejemplos/mapasol.html" target="_blank" alt="Sol" title="Sol">
</map>

<img src="img/windsor.jpg" width="97" height="135" border="0" usemap="#Edificio">

<map name="Edificio" id="Edificio">
    <area shape="rect" coords="15,13,67,109" href="ejemplos/windsor.html" target="_blank" alt="Edificio windsor">
</map>


Ejercicio:

En el documento index.html insertar la siguiente figura (150x200 px), delimitar con un mapa sensitivo la casa (un rectángulo), el tejado (un polígono) y el sol (un círculo), de forma que al situar el cursor sobre dichas zonas aparezcan los siguientes textos: Casa, Tejado y Sol, respectivamente.

nube Sol

Edificio windsor