Mapa de Imagenes

Explicamos detalladamente el proceso para crear mapas de imágenes, imágenes que tienen varios enlaces en distintas áreas.
Para crear mapas de imágenes debemos especificar Las líneas geométricas que delimitan los enlaces en la imagen, es decir, las áreas de los enlaces, tienen que ser definidas por medio de coordenadas. Cada imagen es definida por unas dimensiones de ancho (X) y alto (Y) y cada punto de la imagen puede ser definido por tanto diciendo a que altura (x) y anchura (y) nos encontramos. Si deseamos saber qué coordenadas corresponden a un punto concreto de nuestra imagen, lo mejor es utilizar un programa de diseño grafico como Photoshop o Paint Shop Pro.

Las etiquetas o tags que se utilizan para la creación de mapas de imágenes son:

<map name=”mapa1″>
<area shape=”CIRCLE” coords=” x1,y1,r1″ href=”#
<area shape=”CIRCLE” coords=” x2,y2,r2″ href=” #”>
<area shape=”circle” coords=” x3,y3,r3″ href=” #”>
<area shape=”CIRCLE” coords=” x4,y4,r4″ href=” #”>
</map>
<img src=”mapa1.gif” usemap=”#mapa1″> <map>…..</map> identifican que vamos a crear un mapa de imágenes. Generalmente, lleva asociado el atributo “name” para asignarle un nombre al mapa. <area> define las áreas que vamos a poder activar en esa imagen. A esta etiqueta le acompañan los siguientes atributos: shape= Estableceremos el tipo de área a definir. Puede tratarse de rect (rectangular), poly (poligonal) o circle (circular). Coords= Las coordenadas que definen el área, serán un grupo de valores numéricos distintos dependiendo del tipo de área (shape) que estemos definiendo.Href= Indica la dirección de la página web a la que accede si pinchamos en un área determinada. Finalmente, para que una imagen sea tratada como un mapa, se debe incluir en la etiqueta <img> el atributo usemap=”#nombre del mapa”. Para saber a qué mapa debe responder. Tipos de áreas:shape: distintas.Existen tres tipos de áreas distintas, suficientes para hacer casi cualquier tipo de figura:
shape=”CIRCLE” Crea un área circular, que se indica con la coordenada del centro del círculo y el radio. A la vista de nuestro dibujo, la etiqueta de un área circular tendría esta forma:<area shape=”CIRCLE” coords=”X1,Y1,R” href=”#”>

shape=”RECT” Crea un área rectangular. Para definirla se utilizan las coordenadas de los puntos de la esquina superior izquierda y la esquina inferior derecha. Tal como están nombradas dichas coordenadas en nuestro dibujo, el área tendría la siguiente etiqueta:<area shape=”RECT” coords=”X1,Y1,X2,Y2″ href=”#”>

shape=”POLY” Este tipo de área, poligonal, es la más compleja de todas. Un polígono queda definido indicando todos sus puntos, pero atención, los tenemos que indicar en orden, siguiendo el camino marcado por el perímetro del polígono. A la vista del dibujo y los nombres que hemos dado a los puntos del polígono, la etiqueta <area> quedaría de esta forma.<area shape=”POLY” coords=” X1,Y1, X2,Y2, X3,Y3, X4,Y4″ href=”#”>

En este Link podemos encontrar un ejemplo del mapa de imagenes