Este post vai te ensinar:
- O que são mapas de imagem HTML?
- Como criar mapas de imagem em um documento HTML?
- Como criar um mapa de imagem vinculado a outra página?
O que são mapas de imagem HTML?
O mapa de imagem é uma imagem com áreas que podem ser clicadas. Para fazer um mapa de imagem em HTML, o “
Sintaxe
A sintaxe para especificar mapas de imagem em um documento HTML é mencionada abaixo:
< img origem = 'imagens/img1.jpg' tudo = 'computador portátil' mapa de uso = '#espaçoclique' >
< mapa nome = 'espaço de clique' >
< área forma = 'reto' coordenadas = '224,37,422,312' href = 'laptop.html' >
< / mapa >
O ' ” é definido com os seguintes atributos:
- “ origem ” especifica o caminho da imagem.
- “ tudo ” mostra um texto alternativo quando uma imagem não pode ser carregada.
- “ mapa de uso ” é especificado para tornar as áreas da imagem clicáveis. Para fazer um link, seu valor deve ser o mesmo que a classe ou id do elemento “
O '
- “ forma ” especifica o tamanho da área de um HTML “
' elemento. - “ coordenadas ” define as coordenadas da área clicável.
- “ href ” define o URL da fonte.
Como criar mapas de imagem em um documento HTML?
Para criar um mapa de imagem em um documento HTML, confira as instruções fornecidas:
- Em HTML, adicione um “ ” elemento e atribua uma classe “ mapa de imagem ”.
- Dentro deste div, adicione um “
” para adicionar uma imagem associada aos atributos discutidos acima.
- Em seguida, adicione um HTML “
” elemento e atribua a ele o “ clickspace ' nome. - Observe que o “ mapa de uso ” é atribuído o nome “ #clickspace ” apontando para o “ nome ” da tag “
- Dentro dele, adicione o “ <área> ” com os atributos mencionados acima:
< div classe = 'mapa de imagem' >
< img origem = 'imagens/img1.jpg' tudo = 'computador portátil' mapa de uso = '#espaçoclique' >
< mapa nome = 'espaço de clique' >
< área forma = 'reto' coordenadas = '224,37,422,312' href = 'laptop.html' >
< / mapa >
< / div >Vamos para a seção CSS para ajustar o tamanho da imagem.
Estilo “
” em CSSUtilize o “ .imagem-mapa ” para acessar a classe “
” e aplique as seguintes propriedades CSS: .imagem-mapa {
largura : 700 pixels;
margem: carro;
}Aqui está a descrição das propriedades CSS mencionadas:
- O ' largura ” define a largura do elemento div.
- O ' margem ” adiciona mais espaço ao redor do elemento.
Elemento “img” de estilo
.image-map img {
largura : 100 %;
}Veja, as coordenadas de área especificadas no “ coordenadas ” agora são clicáveis:
Na próxima seção, aprenderemos como vincular o mapa de imagem a outra fonte.
Como criar um mapa de imagem vinculado a outra página?
Crie outra página HTML com a extensão “ .html ” seguindo as etapas mencionadas abaixo:
- No nosso caso, damos o nome de “ laptop.html ”.
- Adicione um elemento div e atribua a ele uma classe “ laptop-img ”.
- Em seguida, coloque uma imagem usando o botão “
” e associe o elemento “ origem ' e ' largura ' atributos.
- Em seguida, especifique um parágrafo usando o “ ' elemento:
< img origem = '/images/laptop.jpg' largura = '400 px' >
< p >Um laptop é um computador portátil que pode ser movido e usado em uma variedade de configurações.< / p >
< / div >Em CSS, especifique as seguintes propriedades CSS para o “ laptop-img ' classe:
.laptop-img {
largura : 500 pixels;
margem: carro;
}Saída
Agora, vamos vincular o “ laptop.html ” página para uma imagem “ <área> ” elemento da primeira página. Para fazer isso, especifique o URL da página para o “ href ” do elemento “ ” conforme mostrado abaixo:
< área forma = 'reto' coordenadas = '310,57,590,470' href = 'laptop.html' >Saída
Aprendemos com sucesso o que são mapas de imagem e como eles estão vinculados a outras fontes.
Conclusão
O HTML “
” elemento é utilizado para criar um mapa de imagem ou uma imagem com áreas clicáveis. Para definir as áreas clicáveis da imagem, um ou mais “ <área> ” tags são adicionadas dentro do elemento “ - Dentro deste div, adicione um “