To de Imagens em HTML

Mapeamento de Imagens em HTML
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>


<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.

To de Imagens em HTML

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

To de Imagens em HTML

Enviado por

Direitos autorais:

Formatos disponíveis

Mapeamento de Imagens em HTML

Comentar Imprimir Enviar Compartilhar (em breve)

Hoje eu estava tentando aprender alguma coisa sobre mapeamento de imagens em

<map id="mapaformas" name="mapaformas">

<p style="position:absolute;top:400px;">Clique na imagem para marcar

<textarea type="text" style="position:relative;top:500px;"

Você também pode gostar