Un mapa de imagen permite definir varios enlaces en una misma imagen; cada enlace es accesible pinchando en una zona concreta de la imagen. Un ejemplo:
<!DOCTYPE html> <html lang="es-ES"> <head> <title> fig06_03 </title> </head> <body> <img src="fig06_03.jpg" alt="Ejemplo de un mapa de imagen" width="375" height="500" usemap="#portada"> <map name="portada"> <area shape="rect" coords="40,460,170,500" href="../fotografia/index.php" alt="Castellano"> <area shape="rect" coords="210,460,333,500" href="../fotografia/index-en.php" alt="English"> <area shape="circle" coords="60,56,47" href="../fotografia/index.php" alt="Castellano"> <area shape="poly" coords="290,39,277,111,264,277,261,380,283,398,322,390,324,279,315,105,297,40" href="../fotografia/index-en.php" alt="English"> <area shape="default"> </map> </body> </html>
Cuyo funcionamiento puedes ver en esta página1).
Los mapas de imagen se definen entre las etiquetas <map>…</map>.
Como se puede observar en el ejemplo la etiqueta de la imagen sobre la que se basa el mapa incluye el atributo usemap que tiene como valor un nombre (en el caso del ejemplo, portada) precedido del símbolo #; sirve para relacionar la imagen con el mapa de imagen mediante la inclusión en la primera parte de la etiqueta map del atributo name, que debe tener el mismo nombre que el utilizado en el atributo usemap de la imagen.
Entre el inicio y el final de la etiqueta map se incluyen las etiquetas area con las que se definirán las áreas correspondientes a cada uno de los enlaces. Las etiquetas area tienen cinco atributos esenciales:
shape: este atributo especifica la forma del área. Sus valores pueden ser:rect: especifica un rectángulo;circle: especifica un círculo;poly: especifica un polígono;default: especifica la totalidad de la imagen.coords: este atributo especifica las coordenadas del área, que serán:rect: las coordenadas (x,y) de la esquina superior izquierda y la esquina inferior derecha: (x1,y1,x2,y2);circle: las coordenadas (x,y) del centro del circulo y el valor del radio (r): (x,y,r);poly: las coordenadas (x,y) de todos los vértices del área: (x1,y1,x2,y2,…,xn,yn).href: este atributo especifica la dirección a enlazar;alt: muestra un texto alternativo a la imagen.
En el ejemplo la primera etiqueta area corresponde a un rectángulo alrededor de la palabra Fotografía y lleva a mi página de fotografía en su versión en castellano.
La segunda etiqueta area corresponde a un rectángulo alrededor de la palabra Photography y lleva a mi página de fotografía en su versión en ingles.
La tercera etiqueta area corresponde a un círculo alrededor de la roca redondeada de la parte inferior izquierda de la imagen; lleva, también, a mi página de fotografía en su versión en castellano.
La cuarta etiqueta area corresponde a un polígono alrededor del monolito de la parte derecha de la imagen; lleva, también, a mi página de fotografía en su versión en ingles.
La línea <area shape=“default” nohref> determina que, excepto las zonas que se declaren como activas, lo demás es zona no activa. Esta línea no es totalmente necesaria.
Las coordenadas de los puntos de una imagen las podéis obtener mediante el uso de un visor de imagen.
Ir a HTML.