Buscar..


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 .

Introducción a los mapas de imagen

Descripción

Un mapa de imagen es una imagen con áreas en las que se puede hacer clic que generalmente actúan como hipervínculos.

La imagen está definida por la etiqueta <img> , y el mapa está definido por una etiqueta <map> con etiquetas <area> para indicar cada área en la que se puede hacer clic. Utilice los usemap y name para enlazar la imagen y el mapa.


Ejemplo básico

Para crear un mapa de imágenes de modo que se pueda hacer clic en cada una de las formas de la imagen a continuación:

triángulo, cuadrado, círculo de imagen

El código sería el siguiente:

<img src="http://jaced.com/blogpix/2007/trisquarecircle/002.gif" usemap="#shapes">
<map name="shapes">
    <area shape="polygon" coords="79,6,5,134,153,134">
    <area shape="rectangle" coords="177,6,306,134">
    <area shape="circle" coords="397,71,65">
</map>

Debería ver que el navegador reconoce las áreas cuando el cursor se convierte en un puntero. Vea una demostración en vivo en JSFiddle, o vea una demostración a continuación:

Demostración de mapa de imagen y cursor.



Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow