Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Camerata

[Resolvido] Como saber posição (x,y) de um pixel?

Por , em Javascript

Recommended Posts

Camerata    0

Camerata
Postado

Olá amigos, quero fazer script para estudo que faça uma imagem seguir o mouse. Eu pego as coordenadas do mouse, porém só sei posicionar a imagem via pixel por css. Como posso saber as coordenadas de um pixel? Ou como posicionar uma imagem a partir destas coordenadas.

 

 

Obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Sancao    0

Sancao
Postado

tive problemas com isso a pouco tempo e consegui uma função que funciona em todos os navegadores

 

function getPosition(e) {
	var cursor = new Array;	
    if (e.pageX || e.pageY) { //Firefox, Chrome & Safari
        cursor[0] = e.pageX;
        cursor[1] = e.pageY;
    } 
    else { // IE
        cursor[0] = e.clientX + 
            (document.documentElement.scrollLeft || document.body.scrollLeft) - 
            document.documentElement.clientLeft;
        cursor[1] = e.clientY + 
            (document.documentElement.scrollTop || document.body.scrollTop) - 
            document.documentElement.clientTop;
    }
    return cursor;
}

na chamada tem que usar getPosition(event), o parametro tem que vir da página, não pode ser escrito diretamente no JS

 

para a imagem seguir o mouse você utiliza

 

var coordenadas = getPosition(event);
document.getElementById('id-da-imagem').style.left = coordenadas[0];
document.getElementById('id-da-imagem').style.top = coordenadas[1];

Compartilhar este post

Link para o post
Compartilhar em outros sites

Camerata    0

Camerata
Postado

Não sei pq não estava funcionando, mas agora está funcionando perfeitamente :huh:

Nao sabia que os pixels era equivalente às coordenadas (x,y)...

 

Aqui eu fiz assim, para quem quiser saber:

<script>
var posicaoX; var posicaoY;

function coord(e) {

var posicaoY = 0;
var posicaoX = 0;

var evt = (!e)?window.event:e;

if(evt.pageX) { posicaoX = evt.pageX; posicaoY = evt.pageY}
else if(evt.clientX){ posicaoX = evt.clientX; posicaoY = evt.clientY}
else{return false}

document.getElementById("imagem").style.position = "absolute";
document.getElementById("imagem").style.left = posicaoX + 15 + "px";
document.getElementById("imagem").style.top = posicaoY + 10 + "px";

document.getElementById("show").innerHTML = "X = " + posicaoX + "Y = " + posicaoY;


}
</script>

<body onmousemove="coord(event)">

<div id="show">  </div>
<img src="ranger2.jpg" id="imagem" class="imgranger" />

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito