[Resolvido] Bug nas posiçoes do mouse X e Y

[AprendendoC]

pessoal tenho um problema com as coordenas do mouse... nao sei se vou conseguir relatar o meu erro...

bem e o seguinte, tenho o ponto X e Y conforme o codigo abaixo....

if((e.pageX > 574 && e.pageX < 652) && (e.pageY > 517 && e.pageY < 592)){

eu estava a editar o codigo em meu Desktop e transferi para o meu notebook e aconteceu o seguinte... antes eu clicava onde diz antes na imagem abaixo, agora tenho que clicar mais pra baixo, e o ponto e o meso....

alguem sabe pq aconteceu isto?? estou a usar o mesmo navegador em ambos os pcs, no desktop funciona mas no notebook da esse bug...

[HappyHippyHippo]

e como estás a determinar a posição do rato ?

[AprendendoC]

if((e.pageX > 574 && e.pageX < 652) && (e.pageY > 517 && e.pageY < 592)){
focos++;
$("#focos").html("Focos : " + focos);
$("#pontos").html("Pontos : " + (pontos = pontos + 5));
$("<div id='msg'>").attr("title", "Garrafas").appendTo("#box").html("").dialog();
$("<img class='sobre'>").attr("src", "certo.png").appendTo("#box").css({top: "350px", left: "230px"});
}

if((e.pageX > 574 && e.pageX < 652) && (e.pageY > 517 && e.pageY < 592))

quando o usuario clicar em algum ponto da tela e este ponto ficar dentro dessas coordenadas executa tal coisa...

ex: essa coordenada se referia as garrafas que estao na caixa com um certo em cima(na imagem no post de cima), mas agora foi para o lado....

o que aconteceu que o ponto x | y referente ao um objeto na imagem se deslocou para o lado...

Edited June 19, 2013 at 01:34 PM by AprendendoC

[HappyHippyHippo]

da ai o url da coisa ...

[AprendendoC]

e pra ser um jogo em localhost...

tah um rar do arquivo...

https://mega.co.nz/#!cI8jjK5L!O0UZ0W0maUwlLMNFVFhZ81r7RxIEU6-dGffHYi-9Y-k

[HappyHippyHippo]

de bug não tem nada ...

- se tens 25% de espaço de espaço à esquerda, quando diminuis a largura da janela, quando é 25%

- se tens 20% de espaço de espaço superior, quando diminuis a altura da janela, quando é 20%

porque raio é que estás a verificar posições fixas da página numa imagem que flutua ???

[AprendendoC]

troquei a imagem para position: absolute, mas continua igual, estranho que no desktop funciona, e no notebook não... acho que vou verificar o codigo e ajeitar melhor...

[yoda]

Estive para te avisar mais que uma vez que usar as coordenadas ia dar problemas com resoluções diferentes, devia tê-lo feito mais cedo ..

Tens várias opções, mas no geral se quiseres realmente usar coordenadas vais ter de as contextualizar com a imagem em si e não com o ecrã. Não vai ser fácil porém caso tenhas um layout fluído.

Edited June 19, 2013 at 06:03 PM by yoda

[HappyHippyHippo]

fácil é ...

var image_offset = $('#levelUm').offset();

var rel_x = e.pageX - image_offset.left;
var rel_y = e.pageY - image_offset.top;

if((rel_x > 574 && rel_x < 652) && (rel_y > 517 && rel_y < 592)){

agora é acertar os valores aos valores reais da imagem

[yoda]

Caso o cliente altere as dimensões do browser durante a execução esses valores terão de ser recalculados, isto em layouts fluídos.

[HappyHippyHippo]

como podes ver, é sempre recalculado pela leitura do offset da imagem no momento do click

[AprendendoC]

como faço para o jquery me mostra as posiçoes na tela??

$("#levelUm").mousemove(function(e){
var offset = $(this).offset();
var relX = e.pageX - offset.left;
var relY = e.pageY - offset.top;
$("#coord").html(relX + " - " + relY);
});

[HappyHippyHippo]

coloca-te na minha posição, volta a ler a questão e vê se percebes alguma coisa do que acabaste de escrever

[AprendendoC]

consegui fazer o que queria!

Edited June 20, 2013 at 01:12 PM by AprendendoC