HTML5 tag area

Tag utilizada para destacar uma área clicável dentro de uma imagem ou mapa.

Muito útil, essa tag adiciona vários inks em uma imagem, tem vários atributos, alguns bem semelhante com a tag (a).

Um exemplo a ser usado esta tag, seria em uma imagem de um mapa, onde você teria que adicionar links para cada estado, sem precisar cortar a imagem, esta tag cria uma area no determinado ponto que você estipular e cria os links, que no caso de um mapa, cada estado com seu link e legendas.

A tag é utilizada em conjunto com (img) tag d imagem e (map) tag de mapa, cria as devidos pontos na imagem e da as coordenadas da área a ser inserido o link.

Veja no exemplo abaixo:

exemplo tag AREA

Circulo Retangulo Poli

No exemplo da área do circulo é definido a distância da esquerda para o centro, cima para o centro e tamanho do circulo

No retângulo é definido a distância da esquerda para o início do retângulo, cima para a parte inferior do retângulo, esquerda para o final do retângulo e por último de cima para baixo no começo.

No polígono são feita as medidas em pares, sempre da esquerda para direita até a ponta e de cima para baixo da mesma forma, e assim vai passando as medidas e criando a forma desejada.

Atributos:

ALT exibe o título referente ao link

COORDS passa as coordenadas para demarcar a área

HREF que define o endereço do link

HREFLANG

MEDIA atributo de mídia, mais detalhe sobre “media” AQUI

HEL que define a relação entre a página atual e a vinculada, detalhes AQUI

SHAPE que define o formato da área, como vimos no exemplos acima.

TARGET especifica onde vai abrir o documento vinculado do link, detalhes AQUI

TYPE especifica tipo MIME de documento vinculado

A tag AREA ainda suporta atributos de janela e atributos globáis.

Garanto que não é difícil, depois de saber de onde que tem que se basear e começar a passar as medidas.

Existe alguns plugins usados em mapas para fazer efeitos de (hover), quando passa mouse por cima, usando Jquery, com a área demarcada com cores fica bem mais fácil se basear e fazer a forma perfeita

Abraço e até a próxima!

Leave a Reply

Pin It on Pinterest

Shares

Compartilhe!

Mostre esse post para seus amigos.