Comentar
Imprimir 
Enviar
Compartilhar (em breve)Hoje eu estava tentando aprender alguma coisa sobre mapeamento de imagens em HTML. Para esse mapeamento a linguagem HTML oferece a tag <MAP>. Para aprender como essa tag funciona, me propuz a fazer um pequeno código usando o mapa político do Brasil. A primeira coisa que fiz foi procurar na Internet uma arquivo de imagem que contivesse o mapa das divisões estaduais do país. Eu queria fazer um pequeno exemplo de uso da tag <MAP>.
Abaixo tem um exemplos de uso de mapeamento de imagem. Passe o mouse sobre cada uma das formas geométricas e o ponteiro do mouse se tranforma em uma mão indicando que a imagem virou um link. Caso você clicar nessas formas você será levado para outra página.
<map id="mapaformas" name="mapaformas">
<area shape="rect" coords="19,17,123,85" href="#" alt="RETANGULO"/>
<area shape="circ" coords="177,95,45" href="#" alt="CIRCULO"/>
<area shape="poly" coords="62,102,116,114,121,140,94,159,78,135,50,178,22,132,62,103"
href="#" alt="POLIGONO"/>
</map>
Quando tentei fazer um mapeamento mais complicado (o mapa político do Brasil) tive bastante dificuldade de encontrar as coordenadas. Daí tentei fazer um pequeno código para facilitar essa tarefa. Este código vai capturando as coordenadas da imagem à medida que você vai clicando ao redor da imagem. Deu um trabalhinho pra fazer ele, mas o resultado ficou legal. Estou disponibilizando o código aqui para caso alguém precise em algum trabalho.
<html>
<head>
<script type="text/javascript">
function coordenadas(event)
{
var x=event.clientX;
var y=event.clientY;
var coord = x + "," + y;
return coord;
}
function listar(event){
var coord = coordenadas(event);
var texto = document.getElementById("listacoord");
texto.value += coord + ",";
}
</script>
</head>
<body>
<!-- AQUI VOCE COLOCA O ENDERECO DA IMAGEM QUE QUER MAPEAR -->
<!-- SUBSTITUA "IMAGEM.JPG" PELA SUA IMAGEM -->
<img src="IMAGEM.JPG"
style="border-style:none;position:absolute;top:0px;left:0px" onmousedown="listar(event)">
<p style="position:absolute;top:400px;">Clique na imagem para marcar as coordenadas.<br/>
Copie estas coordenadas e cole dentro no atributo coords="" da tag <AREA>.<br/>
Não esqueça de apagar a vírgula no final do da linha gerada.</p>
<textarea type="text" style="position:relative;top:500px;" id="listacoord" cols="100" rows="8"></textarea>
</body>
</html>
Para usar esse código, substitua a imagem em src="IMAGEM.JPG" pela imagem que você quer mapear. Depois salve o código como "map.htm". Quando abrir essa página em um navegador, basta ir clicando na imagem para gerar as coordenadas automaticamente.
Exelente!!!
ResponderExcluirIsso facilita bastante ^^
VLW!!!
Fico contente. Esse pequeno código não é nenhuma invensão da roda, mas é uma mão na roda...
ResponderExcluirObrigado pela participação.
PERFEITO!!!
ResponderExcluirFábio, muito obrigada por disponibilizar o código. Ele resolve uma tarefa muito árdua de cumprir sem automação. Eu não sou programadora e não tenho familiaridade com html. Tive um problema e, talvez, você possa me ajugar. Gravei uma figura chamada IMAGEM.jpg no endereço C:\Users\Win7\Pictures\IMAGEM.jpg de meu computador. No código, ele foi inserido assim: . Não alterei o nome da imagem no código porque é o mesmo. Quando abro a página no navegador a figura aparece como um X (bloqueada). Se clicar sobre o X, as coordenadas vão sendo geradas, o que me diz que, se a figura estivesse aparecendo, tudo estaria dando certo. Tentei mudar as configurações de segurança e nada resolveu. Estou fazendo alguma coisa errada?
ResponderExcluirKátia Maria
Caraca, bicho valeu pela ajuda!
ResponderExcluirP-E-R-F-E-I-T-O!!
caraca... no i.e. funcionouperfeitamente!
ResponderExcluirMas nao funcinou no meu firefox atalizado.
Tem q ter alguma configuraçao do bowser ativada, pra funcionar os links nas imagens?(nem fica 'clicavel' as figuras...://
oi eu quero fazer um mapeamento da imagem para o cabeçalho do meu blog.
ResponderExcluirVê-lo aqui está o link para ver onde eu quero adicionar o link de mapeamento. (URL: https: / lh4.googleusercontent.com/_PIzoU--xLZ4/TbWTOpu4EZI/AAAAAAAAAD8/5owAJjcl6G4/s640/MAPEADO.png /)
Meu blog é: http://vagostubepeliculas.blogspot.com, lá você pode ver os códigos que eu tenho derrepente eu preciso adicionar uma URL para link.
Mil Gracias, Saludos:)
Ola Fabio, muito bom seu script!
ResponderExcluirDesculpe o abuso mas implementei o mesmo.
Fiz alterações e montei uma pagina que roda em php que gera o script completo automaticamente! Fiz pouco pois estou sem tempo! Mas quem quiser colaborar é bem vindo!
Deixando os crétidos por favor, vá informado o que fez e seu nome (contato)!
LINK: http://pastebin.com/tWJAKqQE
Pow! MT MASSA! Valeu mesmo!!!!!!!!!!!!!!!!!!!!!!!!
ResponderExcluirPaulo Adriano
vlw, me ajudou muito :)!!!
ResponderExcluirnosssa vlwww mto massa
ResponderExcluirshow de bola
ResponderExcluirOtimo.. parabéns me ajudou muito
ResponderExcluirCaro Fábio, muito obrigado! Seu código simplificou por completo o trabalho de mapeamento de imagens. Perfeito mesmo!
ResponderExcluirParabéns pelo blog e por sua boa vontade em compartilhar sua experiência conosco.
Parabéns! Mt bom!!!
ResponderExcluir