Oi pessoal do GUJ! Este é meu primeiro post aqui no forum e gostaria de pedir a ajuda de vocês para identificar o problema com meu primeiro código javascript.
<html>
<head>
<title>
Mapeamento de Imagens HTML
</title>
<script type="text/javascript">
function coordenadas(event){
var x = event.clientX;
var y = event.clientY-286;
var coord = x + "," + y;
return coord;
}
function listar(event){
var coord = coordenadas(event);
var texto = document.getElementById("listacoord");
texto.value += coord + ",";
}
function limparcampos(){
if(document.getElementById("listacoord").value!="") {
document.getElementById("listacoord").value="";
}
}
function copiartexto(caixa) {
var campo = document.caixa;
campo.select();
window.clipboardData.setData('Text', campo.value);
}
/*var copytoclip=1
function HighlightAll(theField){
var tempval=eval("document."+theField)
tempval.focus()
tempval.select()
if (document.all&©toclip==1){
therange=tempval.createTextRange()
therange.execCommand("Copy")
window.status="Copia para a área de transferência!"
setTimeout("window.status=''",2400);
}
}
function highlight(field){
field.focus();
field.select();
}
function goToURL(){
window.location="javascript:HighlightAll('forms[0].select')";
}*/
</script>
</head>
<body>
<!-- AQUI VOCE COLOCA O ENDERECO DA IMAGEM QUE QUER MAPEAR. SUBSTITUA "IMAGEM.JPG" PELA SUA IMAGEM. -->
<!--<img src="img/joaninha.jpg" style="border-style:none;position:absolute;top:286px;left:0px;" onmousedown="listar(event)">-->
<div style="background-color:#FFFF00; border-style: solid; position: absolute; left: 10px; padding: 10px; top: 10px;">
<p >
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>
<span>
Coordenadas:<br />
</span>
<input type="button" value="Copiar" onClick="javascript:copiartexto(listacoord)" style="float: right; margin-top: -25px; margin-right: 103px; width: 100px;" /><br />
<input type="button" value="Limpar" onClick="limparcampos()"style="float: right; margin-top: -45px; width: 100px;" /><br />
<textarea type="text" id="listacoord" cols="100" rows="8" style="margin-top: -40px;"></textarea>
</div>
</body>
</html>
Bem, esse código acima é uma mão na roda para quem precisa mapear imagens. Com ele basta ir clincando na imagem para ao final pegar as coordenadas X e Y para usar no html. O problema que estou enfrentando diz respeito ao texto em vermellho (vide código). O valor '-286' tive que adicionar para compensar o deslocamento que a imagem sofre em sua formatação. O código original iniciava a imagem no ponto 00 (zero-zero). Porém, o original deixaria por cima da imagem a textarea que armazena as coordenadas a serem usadas, prejudicando assim o mapeamento de algumas fotos. Para acabar com o problema desloquei a imagem 286px para baixo e colocando no topo da página a div com os textos explicativos e a textarea das coordendas. Porém, para não alterar as coordenadas do eixo Y pensei em descontar do valor deste eixo os 286px que desloquei da imagem. A princípio a idéia funcionou perfeitamente, porém, hoje, enquanto fui mapear uma imagem com 1920x1200 pixels descobri um problema que simplesmente não consegui achar explicação. O valor de Y, em determinados pontos da imagem (todos dentro da área dos valores positivos) aparece negativo! Fiz então o teste básico e removi os '-286'. Com isso o erro some. Ou seja, o problema está na subtração dos 286. Porém preciso manter essa subtração. Por isso peço a ajuda de todos para equacionar esse mistério. Um abraço a todos e obrigado pela atenção!
