Tag HTML <área>

Estamos falando de Tag Area . Acredito que isso satisfará os requisitos para o aprendizado.

Sintaxe

<area shape="" coords="" href="">

O seguinte mapa de imagens possui áreas clicáveis:

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>
<img src="https://mrexamples.com/wp-content/uploads/html_images/workplace.jpg" alt="Workplace" usemap="#workmap" width="500" height="290">
<map name="mrxmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="mrxcomp.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Black coffee cup" href="blackcoffee.htm">
</map>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Na Tag Area , aqui está nosso segundo mapa de imagem que inclui áreas clicáveis:

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<img src="https://mrexamples.com/wp-content/uploads/2023/03/outerspace-58.gif" width="300" height="225" alt="earth" usemap="#universemap"><map name="universemap"><area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun"><area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury"><area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus"> </map>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está um exemplo da tag <area> com o svg:

Example:

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>
<svg width="300" height="200">
<rect x="10" y="10" width="50" height="50" onclick="location.href='http://example.com/rectangle';"></rect>
<circle cx="100" cy="100" r="40" onclick="location.href='http://example.com/circle';"></circle>
<polygon points="200,10 250,190 160,210" onclick="location.href='http://example.com/polygon';"></polygon>
</svg>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Índice-

Marca HTML <área>:

Usos e Definição

A Tag Area <area> representa uma área dentro de um mapa de imagem (um mapa de imagem consiste em áreas clicáveis).

Geralmente, os elementos <area> são aninhados dentro da tag < map >.

IMPORTANTE: Em imagens específicas, o atributo use map em <img> está vinculado ao atributo name do elemento map, estabelecendo uma conexão entre a imagem e o mapa.

Vantagens da tag HTML <area>

A tag HTML <area> é usada para definir uma área clicável em um mapa de imagem. Aqui estão algumas vantagens de usar essa tag:

Ao usar a tag <area> , você pode mapear com precisão áreas específicas em uma imagem, tornando mais fácil para os usuários clicarem no local exato que desejam.
Com mapas de imagem e a tag <area> , você pode facilitar a navegação dos usuários pelo seu site, pois eles podem clicar em áreas específicas de uma imagem para acessar diferentes páginas ou informações.
O uso de mapas de imagens e a tag <area> pode tornar seu site mais acessível para usuários com deficiência visual que dependem de leitores de tela. As tags fornecem uma maneira de adicionar texto alternativo às imagens, que podem ser lidos em voz alta para os usuários.
Ao usar mapas de imagem e a tag <area> , você pode reduzir o tempo de carregamento geral do seu site combinando várias imagens em uma. Isso pode melhorar a velocidade do seu site e torná-lo mais eficiente.

Resumindo, com a tag <area> , você pode criar designs mais complexos e criativos, pois pode usar imagens como links e mapear várias áreas clicáveis dentro delas.

Atributos Globais

Em HTML, a tag <area> também aceita Atributos Globais .

Atributos do Evento

Em HTML, a tag <area> também aceita Atributos de evento .

Atributos

Atributo	Valor	Visão geral
hreflang	language_code	Este parâmetro define o idioma do URL de destino.
política de referência	sem referência sem referência quando rebaixar origem origem quando origem cruzada mesma origem origem estrita quando origem cruzada url inseguro	Indique quais detalhes do referenciador devem ser incluídos no link.
alternativo	texto	Fornece um texto alternativo para a área. Deve estar presente se o atributo href estiver incluído.
forma	polígono retângulo padrão _	Descreva a forma da área
coordenadas	coordenadas	Uma descrição das coordenadas da área.
download	nome do arquivo	Isso indica que o usuário que clicar no hiperlink fará o download do destino.
href	URL	Este parâmetro define o hiperlink de destino para a área.
meios de comunicação	consulta de mídia	Fornece detalhes sobre para qual mídia/dispositivo a URL é otimizada.
alvo	_blank _parent _self _top nome do quadro	Decida o local de abertura do URL de destino
rele	autor alternativo favorito ajuda licença próximo nofollow noreferrer pré-busca anterior tag de pesquisa	Descreve a relação entre o presente documento e o URL de destino
tipo	tipo de mídia	O tipo de mídia associado ao URL de destino é determinado