Carregando...

Html map

Postado: 7 de junho de 2022

Html map

Neste artigo HTML veremos como usar o elemento HTML chamado tag <map>

A tag <map> é usada para definir um mapa de imagem. Um mapa de imagem é uma imagem com áreas clicáveis.

O atributo name obrigatório do <map> elemento está associado ao atributo usemap do <img> e cria um relacionamento entre a imagem e o mapa.

O elemento <map> contém vários elementos <area> , que definem as áreas clicáveis ​​no mapa de imagem.

Veja o exemplo de mapa de imagem, com área clicável no código html:

<!DOCTYPE html>
<html>
 
<head>
    <title>HTML map</title>
</head>
 
<body>

        <img src="uploads/imagem.png" alt="Loop Nerd" usemap="#logo">
 
        <map name="logo">
            <area shape="rect" coords="0, 0, 50, 50" alt="Loop Nerd" href="uploads/imagem2.png">
        </map>

</body>
 
</html>

Configurações padrão de CSS

A maioria dos navegadores exibirá o elemento  <map> com os seguintes valores padrão:

map {
  display: inline;
}

Observação

  • O atributo usemap para a tag <img> deve ser o mesmo que o atributo name para a tag <map> criando um relacionamento entre esses dois elementos.

Neste artigo abordamos sobre a tag Html map.

Veja outros artigos sobre Tags HTML Lista Completa

Publicado por: Loop Nerd

353 Visualizações

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Artigos Relacionados