Índice

Anterior

Siguiente

Versión Imprimible

Autores

Índice
Capítulo 1

 

Los mapas de imagen permiten dividir un gráfico en partes diferenciadas. Usualmente se utilizan para asignar un vínculo diferente a cada una de las partes.

Existen dos tipos de mapa de imagen: mapas del lado del servidor y mapas del lado del cliente. Para funcionar, los mapas del lado del servidor requieren el uso de lenguajes del lado del servidor. Este tipo de imágenes no los vamos a abordar en este Curso. Por el contrario, los mapas del lado del cliente permiten definir el mapa desde el código HTML. Veamos en qué consisten estos últimos.

Los elementos que debemos conocer para crear mapas del lado del cliente son los siguientes:

Elemento	Etiqueta	Es de tipo:
Mapa	<map>	(no se representa)
Área	<area>	(no se representa)

El elemento map

Este elemento permite definir un mapa de imagen particular. Dentro de él se especifican con el elemento <area> las áreas sensibles del gráfico.

Atributos

Los atributos exclusivos de este elemento son los siguientes:

• id: Una identificación únicsa para el elemento. En este caso es de carácter obligatorio.
• name: Cumple una función similar al anterior, y solo se mantiene por cuestiones de compatibilidad.

El elemento area

Este elemento permite definir cada una de las áreas en las que se dividirá la imágen.

Atributos

Los atributos exclusivos de este elemento son los siguientes:

• alt: Una descripción textual de área. Es de carácter obligatorio.
• shape: Especifica el tipo de figura que determinará el área. Los valores posibles son: rect, rectangle, circ, circle, poly, polygon. Es de carácter obligarorio.
• href: Un URL que indica hacía donde apunta el vínculo.
• nohref: Especifica que el área en cuestión está excuida del mapa de imagen.
• coords: Permite definir las coordenadas que limitarán al área. Sus valores posibles dependen del atributo shape. A saber:
  • Si shape es rect o rectangle, la figura definida es un rectangulo. La sintaxis de coord es:
    coords="izquierda,arriba,derecha,abajo"
  • Si shape es circ o circle, la figura definida es un círculo. La sintaxis de coord es:
    coords="centro_x,centro_y,radio"
  • Si shape es poly o polygon, la figura definida es un polígono. La sintaxis de coord es:
    coords="x1,y1,x2,y2,..,xn,yn"

Trabajo conjunto

Los elementos <map> y <area> trabajan en conjunto. La manera en que lo consiguen es más o menos así:

<img src="imagenes/planetas.png" width="145" height="126" alt="Planetas" usemap="#planetmap" />
<map id="planetmap" name="planetmap">
 <area shape="rect" coords="0,0,82,126" href="sol.html" alt="Sol" />
 <area shape="circle" coords="90,58,3" href="mercurio.html" alt="Mercurio" />
 <area shape ="circle" coords="124,58,8" href="venus.html" alt="Venus" />
</map>

Lo que tendría el siguiente resultado:

Como es posible apreciar, desde la etiqueta <img> se especifica qué mapa de imagen se utilizará con el atributo usemap. Dentro del elemento <map> se encuentran los elementos <area>.