HTML | <a> atributo de forma

El atributo de forma se usa con el atributo de coordenadas para describir el tamaño, la forma y la ubicación de un enlace en un elemento <object> o <img> . No es compatible con HTML 5.
Sintaxis: 
 

<a shape="value">

Valores de atributos: 
 

  • predeterminado: se utiliza para especificar toda la región.
  • rect: Se utiliza para especificar la región rectangular.
  • círculo: Se utiliza para especificar una región circular.
  • poly: Se utiliza para especificar la región poligonal.

Ejemplo: 
 

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
      HTML a shape Attribute
  </title>
</head>
 
<body style="text-align: center">
    <object data=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227165729/area11.png"
            alt="shape"
            type="image/png"
            usemap="#shapemap">
 
        <map name="shapemap">
            <!-- a tag contained image. -->
            <a href=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227165802/area2.png"
               shape="poly"
               coords="59, 31, 28, 83, 91, 83">
              Polynomial
          </a>
 
            <a href=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227165934/area3.png"
               shape="circle"
               coords="155, 56, 26">
              Circle
          </a>
 
            <a href=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227170021/area4.png"
               shape="rect"
               coords="224, 30, 276, 82">
              Rectangle
          </a>
        </map>
    </object>
</body>
 
</html>

Producción: 

Antes de hacer clic en un área específica en la que se puede hacer clic:
 

Después de hacer clic en un área específica en la que se puede hacer clic: 

Navegadores compatibles: los navegadores compatibles con el atributo de forma HTML <a> se enumeran a continuación: 
 

  • Firefox
  • Ópera

Publicación traducida automáticamente

Artículo escrito por jit_t y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *