HTML Área

Postado: 1 de abril de 2022

HTML Área

A tag HTML <area> define uma área clicável ( ou ponto de acesso ) dentro de um mapa de imagem. Você pode associar um hiperlink a esta área clicável. Esta tag deve estar dentro de uma tag <map>.

Definição da Tag <area> !

<area>tag define uma área dentro de um mapa de imagem (um mapa de imagem é uma imagem com áreas clicáveis).

<area> os elementos são sempre aninhados dentro de uma <map>tag.

Atributos !

Esta tag aceita muitos atributos conforme descrito abaixo.

  • shape : A forma a ser mapeada na imagem, pode ser um “retrato”, um “círculo” ou um “poli”.
  • coords : As coordenadas da forma.
  • href : O href é o link para onde o usuário será direcionado após clicar na parte mapeada da imagem.
  • alt : Texto alternativo para uma área clicável em um mapa de imagem.
  • download : Destino de download quando o hiperlink é clicado.
  • target : Contexto no qual abrir o recurso de link.
  • hreflang : Idioma do URL segmentado.
  • media : URL otimizado para mídia ou dispositivo.
  • rel : Relação entre URL e documento.
  • type : tipo de mídia de URL

Veja o exemplo no código Html!

<!DOCTYPE html>
<html>
  
<body>

    <img src="html-css-jquery.png" alt="" width="300" height="119" usemap="#shapemap" />
  
    <map name="shapemap"> 
        
        <area shape="poly" coords="59,31,28,83,91,83" href= "imagem-html.png" alt="Triangle"> 
          
        <area shape="circle" coords="155,56,26" href="imagem-css.png" alt="Circle"> 
          
        <area shape="rect" coords="224,30,276,82" href= "imagem-jquery.png" alt="Square">

    </map>


</body>
</html>

Publicado por: loopnerd

146 Visualizações

Deixe um comentário

O seu endereço de e-mail não será publicado.

Artigos Relacionados