Código Café
08/12/2021 15:01:34
Como Mapear Links em uma Imagem no HTML?
Saiba como incluir links dentro de uma imagem usando a propriedade MAP do HTML.
Lógica
É relativamente simples mapear um ou mais links em cima de uma imagem utilizando o HTML. Basta utilizar a propriedade MAP do HTML. Desta forma você define o formato se é um retângulo, um circulo ou um polígono, as coordenadas do local aonde o primeiro ponto vai ficar, seguido pela coordenada do segundo ponto. Por mais que a lógica seja simples o posicionamento do link na imagem nem sempre é fácil de ser realizado com precisão por isso, sugerimos utilizar sites como o: Image-map.net que facilitam este mapeamento permitindo que você posicione manualmente na imagem gerando o código com as coordenadas corretas automaticamente para você. Código Expresso do jeito que o CODEXPRESS gosta.
Código Expresso
<map name = “imagem_mapeada”>
<area shape = “rect” alt=”Link para Site 1” coords = “0, 0, 100, 100” href=”site1.html”/>
</map>
<img src=”imagem.png” usemap=”#imagem_mapeada” />
Posts relacionados
Posts mais recentes
Mais Pesquisadas
Mais lidas
REVIEWS