Este mapa abaixo foi resultado de meus estudos acerca de mapeamento de imagens usando tags específicas do HTML, a saber <MAP> e <AREA>. Ao passar o mouse sobre os estados brasileiros alguns dados básicos são exibidas em um quadro cinza ao lado. Quando algum estado é clicado abre-se uma página do Wikipedia com informaçoes sobre esse estado.
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.
Comentar
Imprimir 
Enviar
Compartilhar (em breve)
<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.
Este relógio foi feito por mim utilizando os conhecimentos que adquiri em SVG.
SVG é um formato de imagem padronizado pelo Consórcio W3C. Esse tipo de imagem tem certas vantagens em relação aos outros: usa XML, pode usar CSS, pode usar javascript, o arquivo tem tamanho reduzido, a imagem pode ser ampliada infinitamente sem perder resolução, pode-se criar animações, pode-se criar jogos simples e por aí vai.
Mais uma criação minha saiu hoje, depois passar a tarde fazendo o código funcionar. Este é um relógio que utiliza basicamente 3 tecnologias: SVG, Javascript e CSS.
Como eu sou um pouco relutante em utilizar ferramentas como Flash ou Dreamweaver (um pouco não, sou teimoso mesmo), eu prefiro fazer as coisas com o velho e bom bloco de notas, indo direto ao código.
Se você não conseguir ver o relógio funcionar talvez seja porque seu navegador não suporta o formato, como o Internet EXPLOREr. Neste caso pode ser instalado o plugin fornecido pela Adobe. Ou então abandone de vez essa coisa e use o Mozilla Firefox no lugar.
|
|
|
|
|
|
|
|
|
|
|
|
