Mapas de imagem HTML

Muitas vezes, você pode ter visitado sites onde pode encontrar um link como este: “Visite o link para saber mais”. Como resultado, se você clicar nisso, você será levado para um site diferente. Da mesma maneira, a função de mapeamento de imagem do HTML nos permite adicionar links clicáveis ​​às imagens. A página nos direcionará para outra fonte quando você clicar nessa área especificada.

Este post vai te ensinar:

• O que são mapas de imagem HTML?
• Como criar mapas de imagem no documento HTML?
• Como criar um mapa de imagens vinculado a outra página?

O que são mapas de imagem HTML?

O mapa da imagem é uma imagem com áreas que podem ser clicadas. Para fazer um mapa de imagem em HTML, o “”O elemento é utilizado. Além disso, um ou mais “”As tags são adicionadas ao elemento“ ”para especificar as áreas.

Sintaxe

A sintaxe para especificar mapas de imagem em um documento HTML é mencionado abaixo:

O "”O elemento é definido com os seguintes atributos:

• ““src”Especifica o caminho da imagem.
• ““alt”Mostra um texto alternativo quando uma imagem não pode carregar.
• ““UsoMemap”É especificado para tornar as áreas de imagem clicáveis. Para fazer um link, seu valor deve ser o mesmo que a classe ou ID do elemento "".

O "”O elemento é adicionado com os seguintes atributos:

• ““forma”Especifica o tamanho da área de um html“" elemento.
• ““coordenar”Atributo define as coordenadas da área clicável.
• ““Href”Atributo estabeleceu o URL da fonte.

Como criar mapas de imagem no documento HTML?

Para criar um mapa de imagens em um documento HTML, confira as instruções fornecidas:

• Em html, adicione um “”Elemento, e atribuir uma classe“mapa de imagem”.
• Dentro desta div, adicione um “”Elemento para adicionar uma imagem associada aos atributos discutidos acima.
• Então, adicione um html “”Elemento e atribui o“Clickspace" nome.
• Observe que o “UsoMemap”O atributo recebe o nome“#Clickspace"Apontando para o"nome”Atributo da tag“ ”.
• Dentro dele, adicione o “”Tag com os atributos acima mencionados:

Vamos mudar em direção à seção CSS para ajustar o tamanho da imagem.

Estilo “” no CSS

Utilize o “.mapa de imagem"Classe para acessar a"”Elemento e aplique as seguintes propriedades CSS:

.mapa de imagem
Largura: 700px;
margem: automático;

Aqui está a descrição das propriedades CSS mencionadas:

• O "largura”Propriedade define a largura do elemento div.
• O "margem”A propriedade adiciona mais espaço ao redor do elemento.

Elemento de estilo “img”

.mapa de imagem img
largura: 100%;

Veja, as coordenadas da área especificadas no “coordenar”O atributo agora está clicável:

Na próxima seção, aprenderemos como vincular o mapa de imagens a outra fonte.

Como criar um mapa de imagens 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 “computador portátil.html”.
• Adicione um elemento div e atribua -lhe uma classe “Laptop-IMG”.
• Então, coloque uma imagem usando o “”Elemento e associe o“src" e "largura" atributos.
• Em seguida, especifique um parágrafo usando o “

  " elemento:

Um laptop é um computador portátil que pode ser movido e usado em uma variedade de configurações.

No CSS, especifique as seguintes propriedades CSS para o “Laptop-IMG" aula:

.laptop-img
Largura: 500px;
margem: automático;

Saída

Agora, vamos vincular o “computador portátil.html”Página para uma imagem“”Elemento da primeira página. Para fazer isso, especifique o URL da página para o “Href”Atributo do elemento“ ”como mostrado abaixo:

Saída

Aprendemos com sucesso o que são mapas de imagem e como eles estão ligados a outras fontes.

Conclusão

O html “”O elemento é utilizado para criar um mapa de imagem ou uma imagem com áreas clicáveis. Para definir as áreas clicáveis ​​da imagem, uma ou mais “”As tags são adicionadas ao elemento“ ”. Além disso, os atributos associados à tag "" são "forma","coordenar", e "Href”. Este post ilustrou como criar mapas de imagem HTML com um exemplo.