Tag HTML <mapa>
O mapa de tags Html é o tema do post de hoje. Com fé razoável, satisfará as demandas educacionais.
A tag HTML <map> é usada para definir um mapa de imagem do lado do cliente, que permite definir áreas clicáveis em uma imagem. Quando um usuário clica em uma área específica do mapa de imagem, ele é redirecionado para uma URL específica ou executa uma ação, como exibir uma dica de ferramenta ou abrir um modal.
Veja como você pode criar áreas clicáveis em um mapa de imagem:
Example:
Outro mapa de imagem, com áreas clicáveis:
Example:
Aqui está outro exemplo da tag <map> com link externo através dela:
Example:
Uso do mapa de tags
O Tag map <map> especifica um mapa de imagem. Um mapa de imagem clicável é uma imagem com áreas que podem ser clicadas.
O atributo de nome de requisito do elemento <map> é vinculado ao atributo usemap de <img> para estabelecer uma conexão entre a imagem e o mapa.
Aqui estão alguns usos comuns para a tag <map> :
- Você pode usar um mapa de imagem para fornecer um sistema de navegação visual para os usuários. Por exemplo, se você tiver um mapa de uma cidade, poderá criar áreas clicáveis para cada local ou atração principal para fornecer acesso rápido a mais informações.
- Os mapas de imagem podem ser usados em sites de comércio eletrônico para fornecer áreas clicáveis nas imagens do produto, permitindo que os usuários acessem rapidamente as informações, avaliações ou opções de compra do produto.
- Você pode usar mapas de imagem para criar infográficos interativos, permitindo que os usuários cliquem em seções específicas da imagem para aprender mais sobre um tópico.
- Os mapas de imagem podem ser usados para criar jogos simples, onde os usuários clicam em diferentes partes de uma imagem para completar um desafio ou resolver um quebra-cabeça.
- Os mapas de imagem podem ser usados para fornecer instruções passo a passo em um diagrama ou imagem. Por exemplo, você pode criar um mapa de imagem para um diagrama de motor de carro, com áreas clicáveis para cada componente e uma janela pop-up exibindo informações sobre cada peça.
Compatibilidade do navegador
| Elemento |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| <mapa> | Sim | Sim | Sim | Sim | Sim |
Lista de Atributos
| Atributo | Valor | Visão geral |
|---|---|---|
| nome | nome do mapa | Uma obrigação. O nome de um mapa de imagem é atribuído. |
Atributos
Global
Os Atributos Globais também podem ser aceitos em HTML com a Tag <map> .
Evento
Os atributos do evento também podem ser especificados em HTML com a tag <map> .
Configurações padrão de CSS
Por padrão, muitos navegadores renderizarão os seguintes valores de elemento <map> :
map {
display: inline;
}
Vantagens da tag HTML <map>
A tag HTML <map> oferece várias vantagens quando usada em uma página da web:
- A tag <map> permite criar imagens interativas que podem ser usadas para navegação ou para fornecer informações adicionais. Isso pode tornar sua página da Web mais atraente e amigável.
- Ao fornecer áreas clicáveis em uma imagem, os usuários podem navegar facilmente para páginas específicas ou executar ações específicas sem precisar procurar links na página.
- A tag <map> pode ajudar a melhorar a acessibilidade fornecendo texto alternativo para cada área clicável, que pode ser lida por leitores de tela para usuários com deficiência visual.
- Um mapa de imagem pode economizar tempo, permitindo que os usuários acessem rapidamente as informações de que precisam sem ter que navegar por várias páginas.
- A tag <map> pode ser usada com diferentes formatos de imagem e pode ser usada para diversas finalidades, como destacar recursos em um mapa, exibir informações de produtos em um site de comércio eletrônico ou fornecer instruções em um diagrama.
