JGBwiki

Esta página es de solo lectura. Puedes ver la fuente pero no puedes cambiarla. Pregunta a tu administrador si crees que esto es incorrecto.
[[html|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:

<file html 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>

</file>

Cuyo funcionamiento puedes ver en [[https://www.jordigonzalezboada.com/w3mentor/fig06_03.html|esta página]]((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.)).

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|HTML]].