HTML – mapa de imagens

Os mapas de imagem HTML permitem que você produza dimensões clicáveis ​​em uma imagem.

Usando a tag HTML <map> com a tag <area>, um mapa de imagem do lado do cliente pode ser criado.

Normalmente, um mapa de imagem consiste em uma imagem com áreas que podem ser clicadas. Quando você clica em uma imagem, ela abre em um destino novo ou fornecido.

Pode haver mais de um elemento <area> dentro da tag <map> , de acordo com as coordenadas e o tipo da área.

Isso permite vincular qualquer parte da imagem a outros documentos sem dividi-la.

Índice-

Sintaxe do mapa de imagem

<img src=”” alt=”' usemap=”#name_value”>
<map name=”name_value”>
<area shape=”” coords=”” href=”” alt=”'>
<area shape=”” coords=”” href=”” alt=”'>
</map>

Mapas de imagem

Usando a tag HTML <map> , podemos definir um mapa de imagem. O mapa de imagem é uma imagem que contém áreas clicáveis. Uma área é definida por uma ou mais tags <area> .

Abaixo segue a imagem de um computador e uma xícara de café : Clique no computador ou na xícara de café e veja o que acontece:

Ambiente de trabalho

Sun Mercury Venus

O código-fonte HTML para o mapa de imagens HTML acima é o seguinte:

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">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Como funciona o mapa de imagens HTML?

Os mapas de imagens destinam-se a permitir que você realize várias ações com base em onde você clica dentro da imagem.

Imagens e códigos HTML que representam áreas clicáveis ​​são necessários para construir um mapa de imagem OU mapas de imagem HTML .

A imagem

Uma imagem é inserida utilizando a tag <img> .

Você deve adicionar um atributo usemap à imagem para torná-la diferente de outras imagens:

<img src=”workplace.jpg” alt=”Workplace” usemap=”#workmap”>

Para fazer uma associação entre uma imagem e um mapa, o valor usemap começa com uma hashtag # seguida do nome do mapa.

Qualquer imagem pode ser usada como um mapa de imagens Html!

Como criar um mapa de imagem?

Coloque um elemento <map> em um mapa de imagens HTML .

O elemento <map> é usado para fazer mapas de imagem, e o atributo name o conecta à imagem associada:

<map name=”workmap”>

É obrigatório que o atributo name tenha o mesmo valor do atributo usemap de uma tag <img> .

As áreas

Depois disso, adicione as áreas clicáveis.

As áreas clicáveis ​​são especificadas usando o elemento <area> .

Forma

Aqui estão algumas opções para definir a área clicável:

  • Retângulos são determinados por rect .
  • O círculo representa uma área circular.
  • Uma região poligonal é descrita por poly .
  • Padrão – caracteriza toda a região.

Para que a área clicável seja posicionada na imagem, você deve especificar algumas coordenadas.

Forma=”reta”

Shape=”rect” tem duas coordenadas, uma para o eixo x e outra para o eixo y .

Nesse caso, 34,44 fica a 82 pixels da margem esquerda e 76 pixels do topo:

Ambiente de trabalho

As coordenadas ( 270,350 ) estão a 385 pixels da borda esquerda e 310 pixels acima da parte superior:

Ambiente de trabalho

Com esses dados, podemos construir uma área clicável retangular quando se trata de mapas de imagem HTML :

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

A seguinte área marcada em verde torna-se clicável e levará o usuário para “computer.htm”:

Ambiente de trabalho

Forma=”círculo”

Para adicionar as dimensões de um círculo, primeiro obtenha as coordenadas do centro do círculo: ( 337,300 )

Ambiente de trabalho

Em seguida, defina o raio do círculo: 44 pixels.

Ambiente de trabalho

Os dados agora são suficientes para construir uma área circular clicável:

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<area shape="circle" coords="337, 300, 44" href="coffee.htm">
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Nesta área, o usuário clicará e será direcionado para a página web “coffee.htm”:

Ambiente de trabalho

Forma =”poly”

Um polígono é criado pela interseção de vários pontos de coordenadas (o shape=”poly” ).

Você pode utilizar isso para fazer qualquer forma que desejar. Pode parecer um croissant!

Qual é a maneira correta de fazer croissants?

Na imagem abaixo, faremos croissants e uma área clicável quando se trata de mapas de imagem HTML

Comida francesa

As coordenadas x e y de um croissant devem ser encontradas para todas as arestas:

Comida francesa

Existem dois eixos, um para o eixo x e outro para o eixo y, que é o seguinte:

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm">
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

A área com a cor verde torna-se clicável e leva o usuário para “croissant.htm”:

Comida francesa

Aqui está outro exemplo do mapa de imagem:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<map name="primary">
<area shape="circle" coords="75,75,75" href="https://mrexamples.com/wp-content/uploads/html_images/img_girl.jpg" target="_blank" alt="JavaScript">
<area shape="circle" coords="275,75,75" href="https://mrexamples.com/wp-content/uploads/html_images/img_girl.jpg" target="_blank" alt="CSS">
</map>
<img usemap="#primary" src="https://mrexamples.com/wp-content/uploads/html_images/img_girl.jpg" alt="350 x 150 picture of Person">
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Estilo de plano de fundo do mapa de imagem

As imagens usadas com Map também podem ser estilizadas com as propriedades CSS. Veja o exemplo abaixo:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<style>
img {
border:solid;
width:100% ;
height:100%;
}
map {
position:absolute;
}
</style>
</head>
<body>
<map name="primary">
<area shape="circle" coords="75,75,75" href="https://mrexamples.com/wp-content/uploads/html_images/img_girl.jpg" target="_blank" alt="JavaScript">
</map>
<img usemap="#primary" src="https://mrexamples.com/wp-content/uploads/html_images/img_girl.jpg" alt="350 x 150 picture of Person">
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Mapa de imagem e JavaScript

Quando falamos de mapas de imagens HTML, um evento click JavaScript para o elemento <area> para executar uma função JavaScript:

Sempre que a área é clicada, executamos uma função JavaScript usando o atributo onclick .

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<body>
<map name="workmap">
<area shape="circle" coords="337,300,44" onclick="myFunction()">
</map>
<script>
function
myFunction() {
alert("You clicked the coffee cup!");
}
</script>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Resumo do capítulo

  • Construa um mapa de imagem usando o elemento map> do HTML.
  • Utilize o elemento HTML <area> para determinar as áreas clicáveis ​​no mapa de imagem.
  • Um mapa de imagem pode ser apontado usando o atributo usemap HTML.

Etiquetas de Imagem HTML

Marcação Visão geral
<img> Cria uma imagem.
<mapa> Faz um mapa de imagem definindo-o.
<área> Cria uma área clicável dentro de um mapa de imagem.
<imagem> Várias imagens podem estar contidas nesse contêiner.

Você pode encontrar um índice abrangente de todas as tags HTML em nossa página Referência de tags HTML .

Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone
Ao assinar, você concorda com nossa política de privacidade e nossos termos de serviço.