HTML

Mapas de imagen

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:

mapa_de_imagen.html
<!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:

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.

1)
El ejemplo que verás no tiene exactamente el mismo código que acabas de ver; el código de arriba es correcto según el estándar de HTML5, el código de la página del ejemplo es del año 2008, más o menos.