HTMLMapas de imagen


Sintaxis

  • <img usemap="#[map-name]">
  • <map name="[map-name]"></map>
  • <area>

Parámetros

Etiqueta / Atributo Valor
<img> A continuación se muestran los atributos específicos del mapa de imagen para usar con <img> . Se aplican los atributos <img> regulares.
usemap El name del mapa con un símbolo de hash precedido. Por ejemplo, para un mapa con name="map" , la imagen debe tener usemap="#map" .
<map>
name El nombre del mapa para identificarlo. Para ser utilizado con el atributo usemap la imagen.
<area> A continuación se muestran los atributos específicos de <area> . Cuando se especifica href , haciendo de <area> un enlace, <area> también admite todos los atributos de la etiqueta de ancla ( <a> ) excepto ping . Véalos en los documentos de MDN .
alt El texto alternativo para mostrar si las imágenes no son compatibles. Esto solo es necesario si href también se configura en <area> .
coords Las coordenadas que describen el área seleccionable. Cuando shape="polygon" , esto se debe establecer en una lista de "x, y" pares separados por comas (es decir, shape="polygon" coords="x1, y1, x2, y2, x3, y3, ..." ). Cuando shape="rectangle" , esto debe configurarse a left, top, right, bottom . Cuando shape="circle" , esto debe establecerse en centerX, centerY, radius .
href La URL del hipervínculo, si se especifica. Si se omite, entonces <area> no representará un hipervínculo.
shape La forma de la <area> . Se puede establecer en default para seleccionar toda la imagen (no hay coords atributo necesario), circle o circ para un círculo, rectangle o rect para un rectángulo, y polygon o poly para un área poligonal especificada por puntos de esquina.

Observaciones

  • La lista de parámetros anterior se modifica desde los documentos MDN: <map> y <area> .

  • Es posible crear las coordenadas de un mapa de imagen para una imagen con formas más simples (como en el ejemplo introductorio anterior) con un editor de imágenes que muestra las coordenadas (como GIMP). Sin embargo, podría ser más fácil en general usar un generador de mapas de imágenes, como este .

Mapas de imagen Ejemplos relacionados