Manual de referencia HTML

Completo de etiquetas HTML

HTML: Propiedad coords del área

La propiedad coords especifica las coordenadas x e y del área del mapa de imágenes. La propiedad coords se utiliza junto con la propiedad shape para especificar el tamaño, la forma y la posición de la área. Nota: Las coordenadas de la esquina superior izquierda de la área de la imagen son 0,0

　HTML <area> etiqueta

Ejemplo en línea

Mapa de imágenes con áreas clicables:

Ejemplo

<!DOCTYPE html>
<html>
<title>HTML: Propiedad coords del área</title>　-　Sitio web de tutorial básico　oldtoolbag.com</title>
<body>
<p>Haz clic en el sol o en uno de los planetas para observarlo de cerca </p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
　　　<map name="planetmap">
　　<area shape="rect" coords="0,0,82,126" href="sun.html" alt="Sun">
　　<area shape="circle" coords="90,58,3" href="mercur.html" alt="Mercury">
　　<area shape="circle" coords="124,58,8" href="venus.html" alt="Venus">
　　</map>　　
</body>
</html>

Prueba para ver «/›

Compatibilidad del navegador

IEFirefoxOperaChromeSafari

Todos los navegadores populares admiten la propiedad coords.

Definición y uso

La propiedad coords especifica las coordenadas x e y del área de la imagen del mapa.

La propiedad coords se especifica con 　shape Se utilizan atributos juntos para especificar el tamaño, forma y posición del área.

Consejo: Las coordenadas del extremo superior izquierdo de la imagen son 0,0.

HTML 4.01 y HTML5las diferencias entre

No.

Sintaxis

<area coords="value">

Valor del atributo

Valor	Descripción
x1,y1,x2,y2	Si se establece el atributo 'shape' en 'rect', este valor especifica las coordenadas del ángulo superior izquierdo y el ángulo inferior derecho del rectángulo.
x,y,radius	Si se establece el atributo 'shape' en 'circ', este valor especifica las coordenadas del centro y el radio del círculo.
x1,y1,x2,y2,..,xn,yn	Si se establece el atributo 'shape' en 'poly', este valor especifica los valores de los vértices del polígono. Si la primera y la última coordenada no son iguales, para cerrar el polígono, el navegador debe agregar el último par de coordenadas.

　HTML <area> etiqueta

HTML: <template> etiqueta