Atributo shape de HTML <area>

Etiqueta HTML <area>

Definición y uso

shape define la forma de la región.

shape La propiedad Atributo coords Utilizados juntos para definir el tamaño, forma y posición de la región.

Ejemplo

Utilice el atributo shape para especificar la forma de cada región en el mapa de imágenes:

<map name="planetmap">
<area shape="rect" coords="0,0,114,576" href="sun.html" alt="Sun">
<area shape="circle" coords="190,230,5" href="mercur.html" alt="Mercury">
<area shape="circle" coords="228,230,5" href="venus.html" alt="Venus">
</map>

Prueba por tu cuenta

Sintaxis

<area shape="default|rect|circle|poly">

Valor de la propiedad

Valor Descripción
default Especificar toda la región.
rect Definir la región rectangular.
circle Definir la región circular.
poly Definir la región poligonal.

Explicación detallada:

shape La propiedad se utiliza para definir la forma de la región sensible al ratón en el mapa de imágenes:

  • Círculo (circ o circle)
  • Polígono (poly o polygon)
  • Rectángulo (rect o rectangle)

shape El valor de la propiedad afecta la interpretación del atributo coords por parte del navegador. Si no se utiliza shape Si se especifica la propiedad, se asume que se utiliza el valor default. Según el estándar, default significa que la área cubre toda la imagen. En la práctica, los navegadores utilizan por defecto áreas rectangulares y esperan encontrar 4 valores coords. Si no se especifica la forma y no se incluyen 4 valores coords en la etiqueta, el navegador ignorará toda la área.

se puede reconocer shape Los navegadores que pueden proporcionar un área que incluye todos los puntos calientes, para usar en situaciones donde se hace clic fuera del rango definido por otros puntos calientes. Debido a que las áreas en la etiqueta <map> se utilizan en el orden "primero en entrar, primero en salir", todas las áreas por defecto deben colocarse al final. De lo contrario, la área por defecto cubrirá todas las áreas de imagen que se muestren en otras imágenes.

No hay requisitos estrictos de implementación en términos de nombres de forma para navegadores. Por ejemplo, para rectángulos, Netscape 4 no puede identificar "rectangle", pero puede identificar "rect". Por esta razón, recomendamos usar nombres abreviados.

Compatibilidad con navegadores

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Soporte Soporte Soporte Soporte Soporte

Etiqueta HTML <area>