Mapa de Imágenes o Image Map

Siguiendo con la serie de entradas sobre rendimiento web, quería explicar un poco más que es un mapa de imágenes. Un mapa de imágenes es una imagen con areas sobre las que se puede establecer un link. Las hay de dos tipos del lado del cliente y del lado del servidor,  las del lado del cliente son mejores de cara al rendimiento, ya que, no requiere de una petición al back-end, aunque son menos flexibles que las del lado del servidor.

A continuación pondré un código de ejemplo de un mapa de imágnes del lado del cliente. Para usar esta técnica lo único que hay que hacer es establecer las coordenadas de cada area y el link de dicha area. Por ejemplo:

<MAP NAME=»map1″>
<AREA  HREF=»enlace1.html» ALT=»alt1″ TITLE=»titulo1″   SHAPE=RECT COORDS=»6,116,97,184″>
<AREA  HREF=»enlace2.html» ALT=»alt2″ TITLE=»tutilo2″  SHAPE=CIRCLE COORDS=»251,143,47″>
</MAP>

<IMG SRC=»imagen.gif»  ALT=»alt de la imagen» BORDER=0 WIDTH=300 HEIGHT=300 USEMAP=»#map1″><BR>

En la configuración del mapa vemos los siguientes atributos:

href: url del enlace

alt: alt del enlace

title: título del enlace

shape: forma de la figura que puede ser:  default|rect|circle|poly

coords: Que son las coordenadas del area que se definde de la siguiente forma:

• rect: left-x, top-y, right-x, bottom-y.
• circle: center-x, center-y, radius. 
• poly: x1, y1, x2, y2, …, xN, yN. La primera x e y deberían ser la misma que xN e yN para cerrar el polígono.