Atributo coords de <area> de HTML
Definición y uso
Atributo coords El atributo coords especifica las coordenadas de las áreas en el mapeo de imágenes.
Atributo coords Atributo con Atributo shape Se utilizan juntos para especificar el tamaño, forma y posición de la área.
Consejo:Las coordenadas de la esquina superior izquierda de la área son 0,0.
Nota:Si las coordenadas de un elemento area tag se solapan con otras áreas, se priorizará el área tag que aparece primero. El navegador ignorará las coordenadas fuera del límite de la imagen.
Ejemplo
Se especifican las coordenadas de cada área en el mapeo de imágenes utilizando la propiedad coords:
<map name="planetmap"> <area shape="rect" coords="0,0,114,576" href="sun.htm" alt="Sun"> <area shape="circle" coords="190,230,5" href="mercur.htm" alt="Mercury"> <area shape="circle" coords="228,230,5" href="venus.htm" alt="Venus"> </map>
Sintaxis
<area coords="value">
Valor de atributo
| Valor | Descripción |
|---|---|
| x1,y1,x2,y2 | Se especifican las coordenadas de la esquina superior izquierda y la esquina inferior derecha del rectángulo (shape="rect"). |
| x,y,radius | Se especifican las coordenadas del centro y el radio (shape="circle"). |
| x1,y1,x2,y2,...,xn,yn |
Se especifican las coordenadas de los lados del polígono. Si el primer y el último par de coordenadas no son iguales, el navegador agregará el último par de coordenadas para cerrar el polígono (shape="poly"). |
Explicación detallada:
La propiedad coords del elemento <area> define las coordenadas de las áreas sensibles al ratón en el mapeo de imágenes del cliente. El número y significado de las coordenadas depende de la forma del área determinada por la propiedad shape.
A continuación se listan los valores adecuados para cada forma:
Círculo: shape="circle", coords="x,y,z"
Aquí x e y definen la posición del centro del círculo ("0,0" es la coordenada superior izquierda de la imagen), r es el radio del círculo en píxeles.
Polígono: shape="polygon", coords="x1,y1,x2,y2,x3,y3,..."
Cada par de coordenadas "x,y" define un vértice de un polígono ("0,0" es la coordenada superior izquierda de la imagen). Al menos se necesitan tres pares de coordenadas para definir un triángulo; para un polígono de alta latitud se necesitan más vértices.
El polígono se cerrará automáticamente, por lo que no es necesario repetir la primera coordenada al final de la lista para cerrar toda la área.
Rectángulo: shape="rectangle", coords="x1,y1,x2,y2"
La primera coordenada es la coordenada del vértice de una esquina del rectángulo, y el otro par de coordenadas es la coordenada del vértice del otro extremo del diagonal, "0,0" es la coordenada de la esquina superior izquierda de la imagen. Tenga en cuenta que definir un rectángulo es en realidad un método simplificado para definir un polígono con cuatro vértices.
Por ejemplo, el siguiente fragmento de XHTML en el cuadrante inferior derecho de una imagen de 100x100 píxeles define un área sensible al ratón y una área circular en el centro de la imagen.
<map name="map"> <area shape="rect" coords="75,75,99,99" nohref="nohref"> <area shape="circ" coords="50,50,25" nohref="nohref"> </map>
Compatibilidad con navegadores
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Soporte | Soporte | Soporte | Soporte | Soporte |
