Mistério dos números negativos: onde está o erro no código?

Front-end
#1

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.

[code]<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&&copytoclip==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')";
        }*/
	&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
	&lt;!-- AQUI VOCE COLOCA O ENDERECO DA IMAGEM QUE QUER MAPEAR. SUBSTITUA "IMAGEM.JPG" PELA SUA IMAGEM. --&gt;
	&lt;!--&lt;img src="img/joaninha.jpg" style="border-style:none;position:absolute;top:286px;left:0px;" onmousedown="listar(event)"&gt;--&gt;

	&lt;div style="background-color:#FFFF00; border-style: solid; position: absolute; left: 10px; padding: 10px; top: 10px;"&gt;
		<p >
			Clique na imagem para marcar as coordenadas.<br/>
			Copie estas coordenadas e cole dentro no atributo coords="" da tag &lt;area&gt;.<br/>
			Não esqueça de apagar a vírgula no final do da linha gerada.
		</p>
		&lt;span&gt;
			Coordenadas:<br />
		&lt;/span&gt;
		&lt;input type="button" value="Copiar" onClick="javascript:copiartexto(listacoord)" style="float: right; margin-top: -25px; margin-right: 103px; width: 100px;" /&gt;<br />
		&lt;input type="button" value="Limpar" onClick="limparcampos()"style="float: right; margin-top: -45px; width: 100px;" /&gt;<br />
		&lt;textarea type="text" id="listacoord" cols="100" rows="8" style="margin-top: -40px;"&gt;&lt;/textarea&gt;
	&lt;/div&gt;
&lt;/body&gt;

</html>[/code]

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!

#2

Não sei se vai resolver, mas vc tentou colocar a imagem dentro de uma div? Dessa forma ajustando a opção “display” vc consegue fazer com que uma não sobreponha a outra e deixe a imagem com o “top” = 00.
Espero q ajude!

Obs: sempre poste o código dentro das tags “code”, fica mais fácil d ler.

#3

Fabio, valeu pela dica, mas infelizmente não funcionou. Contudo sua observação me ajudou a descobrir que o problema não está em subtrair os 286 do eixo Y, mas sim no próprio método utilizado. O “erro” no valor da coordenada (x ou y) ocorre quando a imagem tem uma resolução superior à resolução do monitor, pois esse método retorna a posição em que o ponteiro do mouse se encontra em relação à tela. Ou seja, se você tiver um monitor widescreen com resolução full hd, você conseguirá capturar as coordenadas de uma área com, no máximo, 1920 x 1080 px (essa dimensão máxima só será possível se usada no modo ‘tela cheia’ do navegador). Como a resolução da tela do meu computador é 1280 x 800, só posso mapear uma área dentro desses valores. Bem, creio que o mistério esteja sanado. Agradeço a todos pela atenção e informo aos moderadores que o tópico pode ser marcado como solucionado. Valeu!

#4