HTML
Mapas de imagen
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:
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:
