Mapas de imagem HTML
Com mapas de imagem HTML, você pode criar áreas clicáveis em uma imagem.
Mapas de imagem
A tag HTML <map>define um mapa de imagem. Um mapa de imagem é uma imagem com áreas clicáveis. As áreas são definidas com uma ou mais <area>tags.
Tente clicar no computador, telefone ou na xícara de café na imagem abaixo:
Exemplo
Aqui está o código-fonte HTML para o mapa de imagem acima:
<img src="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>
Como funciona?
A ideia por trás de um mapa de imagem é que você possa realizar ações diferentes dependendo de onde você clicar na imagem.
Para criar um mapa de imagem, você precisa de uma imagem e de algum código HTML que descreva as áreas clicáveis.
A imagem
A imagem é inserida usando a <img>tag. A única diferença de outras imagens é que você deve adicionar um usemapatributo:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
O usemapvalor começa com uma marca de hash
#seguida pelo nome do mapa de imagem e é usado para criar um relacionamento entre a imagem e o mapa de imagem.
Dica: Você pode usar qualquer imagem como um mapa de imagem!
Criar mapa de imagem
Em seguida, adicione um <map>elemento.
O <map>elemento é usado para criar um mapa de imagem e é vinculado à imagem usando o name
atributo obrigatório:
<map name="workmap">
O nameatributo deve ter o mesmo valor que o
<img>atributo do usemap.
As áreas
Em seguida, adicione as áreas clicáveis.
Uma área clicável é definida usando um <area>elemento.
Forma
Você deve definir a forma da área clicável e pode escolher um destes valores:
rect- define uma região retangularcircle- define uma região circularpoly- define uma região poligonaldefault- define toda a região
Você também deve definir algumas coordenadas para poder colocar a área clicável na imagem.
Forma="reto"
As coordenadas para shape="rect"vêm em pares, uma para o eixo x e outra para o eixo y.
Assim, as coordenadas 34,44estão localizadas a 34 pixels da margem esquerda e 44 pixels da parte superior:
As coordenadas 270,350estão localizadas a 270 pixels da margem esquerda e 350 pixels da parte superior:
Agora temos dados suficientes para criar uma área retangular clicável:
Exemplo
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
Esta é a área que se torna clicável e direcionará o usuário para a página "computer.htm":
Forma="círculo"
Para adicionar uma área de círculo, primeiro localize as coordenadas do centro do círculo:
337,300
Em seguida, especifique o raio do círculo:
44 píxeis
Agora você tem dados suficientes para criar uma área circular clicável:
Exemplo
<area shape="circle" coords="337, 300, 44" href="coffee.htm">
Esta é a área que se torna clicável e direcionará o usuário para a página "coffee.htm":
Forma="poli"
O shape="poly"contém vários pontos de coordenadas, o que cria uma forma formada por linhas retas (um polígono).
Isso pode ser usado para criar qualquer forma.
Como talvez uma forma de croissant!
Como podemos fazer com que o croissant da imagem abaixo se torne um link clicável?
Temos que encontrar as coordenadas x e y para todas as arestas do croissant:
As coordenadas vêm em pares, uma para o eixo x e outra para o eixo y:
Exemplo
<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">
Esta é a área que se torna clicável e direcionará o usuário para a página "croissant.htm":
Mapa de imagem e JavaScript
Uma área clicável também pode acionar uma função JavaScript.
Adicione um clickevento ao <area>elemento para executar uma função JavaScript:
Exemplo
Aqui, usamos o atributo onclick para executar uma função JavaScript quando a área é clicada:
<map name="workmap">
<area shape="circle" coords="337,300,44"
href="coffee.htm" onclick="myFunction()">
</map>
<script>
function
myFunction() {
alert("You clicked the coffee cup!");
}
</script>
Resumo do capítulo
- Use o elemento HTML
<map>para definir um mapa de imagem - Use o elemento HTML
<area>para definir as áreas clicáveis no mapa de imagem usemapUse o atributo HTML do<img>elemento para apontar para um mapa de imagem
Tags de imagem HTML
| Tag | Description |
|---|---|
| <img> | Defines an image |
| <map> | Defines an image map |
| <area> | Defines a clickable area inside an image map |
| <picture> | Defines a container for multiple image resources |
Para obter uma lista completa de todas as tags HTML disponíveis, visite nossa Referência de tags HTML .