Etiqueta HTML <área>

Esta etiqueta <area> se utiliza en un documento HTML para asignar una parte de una imagen para que el usuario final pueda hacer clic en ella. Se utiliza para dirigir al usuario a diferentes enlaces después de que el usuario haga clic en las partes asignadas de la imagen. Se utiliza como una etiqueta secundaria de la etiqueta <map> . No tiene una etiqueta de cierre y, por lo tanto, es una etiqueta vacía para HTML, pero en el caso de XHTML, debe cerrarla correctamente. HTML5 tiene algunos atributos nuevos.

Sintaxis: 

<area>

Atributos:  esta etiqueta acepta muchos atributos como se describe a continuación.

  • forma : la forma que se va a mapear en la imagen puede ser un «rect», un «círculo» o un «poli».
  • coords : Las coordenadas de la forma.
  • href : Thehref es el enlace al que se dirigirá al usuario después de hacer clic en la parte asignada de la imagen.
  • alt : texto alternativo para un área en la que se puede hacer clic en un mapa de imagen.
  • descargar : destino de descarga cuando se hace clic en el hipervínculo.
  • target : Contexto en el que abrir el recurso de enlace.
  • hreflang : idioma de la URL de destino.
  • medios : URL optimizada para medios o dispositivos.
  • rel : Relación entre URL y documento.
  • type : Tipo de medio de URL

Ejemplo: La etiqueta <area> en html. 

html

<!DOCTYPE html>
<html>
 
<body>
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227165729/area11.png"
         alt="" width="300" height="119"
         class="aligncenter size-medium wp-image-910965"
         usemap="#shapemap" />
 
    <map name="shapemap">
        <!-- area tag contained image. -->
        <area shape="poly"
            coords="59,31,28,83,91,83"
            href=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227165802/area2.png"
            alt="Triangle">
         
        <area shape="circle"
            coords="155,56,26"
            href=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227165934/area3.png"
            alt="Circle">
         
        <area shape="rect"
            coords="224,30,276,82"
            href=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227170021/area4.png"
            alt="Square">
    </map>
</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 el área específica en la que se puede hacer clic 

Nota: Esta etiqueta <area> siempre está anidada en la etiqueta <map>.
Navegadores compatibles: 

  • Google Chrome
  • Borde 12 y superior
  • explorador de Internet
  • Mozilla Firefox 1 y superior
  • Ópera
  • Safari

Publicación traducida automáticamente

Artículo escrito por aksh0299 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 *