terça-feira, 13 de janeiro de 2009

Obter as Coordenadas do Mouse

Nesta postagem vamos ver como é relativamente simples obter as coordenadas do mouse quando clicamos em alguma parte de um site. O código aqui apresentado gera uma mensagem que informa as coordenadas do ponto onde o mouse clicou.

<html>
<head>
<script type="text/javascript">

function coordenadas(event)
{
x=event.clientX;
y=event.clientY;
alert("X coords: " + x + ", Y coords: " + y);
}

</script>
</head>

<body onmousedown="coordenadas(event)">
<p>Clique na tela para ver as coordenadas do mouse!!</p>
</body>

</html>

Quando o usuário clica em qualquer parte da página, é gerado um evento do tipo click que carrega algumas informações, dentre elas a posição da página onde ocorreu o clique. Essa posição, assim como no plano cartesiano, é representada por dois valores x e y -- Ponto cartesiano.

<body onmousedown="coordenadas(event)">

O evento gerado com o click será capturado pelo elemento <BODY>. Esse elemento possui um atributo chamado "onmousedown" que serve para chamar a função "coordenadas()".

function coordenadas(event) { x=event.clientX; y=event.clientY; alert("X coords: " + x + ", Y coords: " + y); }

Dentro da função "coordenadas()" os valores do ponto cartesiano P(x,y) são extraídos do evento que ela recebeu. De posse desses dois valores ele dispara uma mensagem de alerta que mostra as exatas coordenadas do clique.

Esse código foi retirado deste LINK do forum Webmasters. Caso alguém se interesse, tem pequena discussão sobre coordenadas nesse forum.

Nenhum comentário:

Postar um comentário