Jump to content

  2. →
  3. →

Photo

Posição (coordenadas X,y) Do Mouse No Navegador?

Started By mabran, 04/06/2004, 19:35

  • Faça o login para participar
23 replies to this topic

#1 mabran

mabran

    Novato no fórum

  • Usuários
  • 8 posts
  • Sexo:Não informado

Posted 04/06/2004, 19:35

Tem como saber as cordenadas x,y que o mouse está dentro do navegador ou saber as cordenadas onde foi efetuado um click?

#2 Guilherme Blanco

Guilherme Blanco

    Loading...

  • Conselheiros
  • 891 posts
  • Sexo:Masculino
  • Localidade:São Carlos - SP/Brasil
  • Interesses:Programação Web e minha namorada (Maria Camila).

Posted 05/06/2004, 00:12

function MousePosition( e ) {
var oEvt = e || window.event;

this.screenX = oEvent.screenX;
this.screenY = oEvent.screenY;
this.clientX = oEvent.clientX;
this.clientY = oEvent.clientY;
this.pageX = oEvent.pageX || this.clientX + doc.scrollLeft || 0;
this.pageY = oEvent.pageY || this.clientY + doc.scrollTop || 0;

// Aqui você exibe os dados que quiser...
document.getElementById("screenX").innerHTML = this.screenX;
// ...
}

document.onmousemove = function( e ) { MousePosition( e ); }
<script language="WebFórum">
// Dados:
Nome("Guilherme Blanco");
Localidade("São Carlos - SP/Brasil");
Cargo("Manutenção");
</script>

#3 mabran

mabran

    Novato no fórum

  • Usuários
  • 8 posts
  • Sexo:Não informado

Posted 05/06/2004, 11:31

Obrigado pela ajuda, não entendo quase nada de javascript. so consegui colocar para funcionar como abaixo, na verdade tenho que pegar alguma apostila para ler.


<script>
function MousePosition( e ) {
var oEvt = e || window.event;

this.screenX = oEvt.screenX;
this.screenY = oEvt.screenY;
this.clientX = oEvt.clientX;
this.clientY = oEvt.clientY;
//this.pageX = oEvent.pageX || this.clientX + doc.scrollLeft || 0;
//this.pageY = oEvent.pageY || this.clientY + doc.scrollTop || 0;


this.teste.value=this.clientX;
this.teste2.value=this.clientY;
//alert (this.clientY,this.clientY);
// Aqui você exibe os dados que quiser...
//document.getElementById("screenX").innerHTML = this.screenX;
// ...
}

document.onmousemove = function( e ) { MousePosition( e ); }


</script>


x<input type=text name=teste><br>
Y<input type=text name=teste2><br>

#4 Without a Nick

Without a Nick

    Sem culpa no cartório

  • Usuários
  • 2378 posts
  • Sexo:Não informado
  • Localidade:Guarulhos

Posted 05/06/2004, 21:46

Um script mais "resumido":

<!--
function coordenadas() {
var x=window.event.clientX;
var y=window.event.clientY;
document.getElementById("posicaoX").value=x;
document.getElementById("posicaoY").value=y;
}

document.onmousemove=coordenadas;
//-->


E crie também os campos:

<input type="text" size=3 id="x"><br>
<input type="text" size=3 id="y">


#5 mabran

mabran

    Novato no fórum

  • Usuários
  • 8 posts
  • Sexo:Não informado

Posted 06/06/2004, 11:39

muito obrigado.

#6 Renan L. Queiroz

Renan L. Queiroz

    Mestre

  • Usuários
  • 690 posts
  • Sexo:Masculino
  • Localidade:Brasilia - DF

Posted 12/02/2008, 14:42

Para todos que procurarm por coordenadas e acharam este tópico ...

Achei mais uma maneira:
<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>

Obrigado a Without a Nick e Guilherme Blanco ... adicionar conhecimento é sempre bom!!

:lol:

Edição feita por: Renan L. Queiroz, 12/02/2008, 14:44.

Especialidade: Desenvolvimento e Banco de Dados.


Este post lhe ajudou? Agradeça: Posted Image

#7 bimonti

bimonti

    Super Veterano

  • Usuários
  • 2654 posts
  • Sexo:Masculino

Posted 12/02/2008, 14:49

Funciona nos 2 navegadores ?
WebFórum - Equipe de Desenvolvimento - Monitor
Posted Image
Yeah I do have some stories, and it's true I want all the glory ...

#8 Renan L. Queiroz

Renan L. Queiroz

    Mestre

  • Usuários
  • 690 posts
  • Sexo:Masculino
  • Localidade:Brasilia - DF

Posted 12/02/2008, 15:06

Funciona nos 2 navegadores ?



:lol: Funciona no Fx, IE7 e IE6 mas no meu caso não está se adequando!

-----

Aff, sempre assim ...

Bimonti, seguinte problema:

O evento pega as coordenadas de acordo com o browser, sendo
assim se a página tiver barra de rolagem não irá funcionar (meu caso), pois quando
o usuário desce para ver o resto e clica as coordenadas mostradas são
de acordo com a borda do browser e no meu caso preciso delas de acordo
com o body! :wacko:

Edição feita por: Renan L. Queiroz, 12/02/2008, 15:32.

Especialidade: Desenvolvimento e Banco de Dados.


Este post lhe ajudou? Agradeça: Posted Image

#9 Nicholas Pufal

Nicholas Pufal

    Impossível: só existe até alguém duvidar e provar o contrário.

  • Usuários
  • 1655 posts
  • Sexo:Masculino
  • Localidade:Porto Alegre

Posted 12/02/2008, 16:37

Renan,

achei um código na internet que captura as coordenadas do body. Dei uma adaptada nele (CSS e as divs) para tu visualizar melhor:

<style>
#x
{ 
 POSITION: fixed; 
 TOP: 20px; 
 LEFT: 0px; 
} 

#y
{ 
 POSITION: fixed; 
 TOP: 40px; 
 LEFT: 0px; 
} 

* html #x
{ 
 POSITION: absolute; 
 TOP: expression(offsetParent.scrollTop +20); 
 LEFT: expression(offsetParent.scrollLeft); 
} 

* html #y
{ 
 POSITION: absolute; 
 TOP: expression(offsetParent.scrollTop +40); 
 LEFT: expression(offsetParent.scrollLeft); 
} 
</style>


<script language="JavaScript1.2">


var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
var tempX = 0;
var tempY = 0;
function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
}
else {  // grab the x-y pos.s if browser is NS
tempX = e.pageX;
tempY = e.pageY;
}  
if (tempX < 0){tempX = 0;}
if (tempY < 0){tempY = 0;}  
document.getElementById("vx").innerHTML = tempX;
document.getElementById("vy").innerHTML = tempY;
return true;
}

</script>

<BODY>

<div id="x">X <span id="vx"></span></div><br>
<div id="y">Y  <span id="vy"></span></div>

<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>

</body>

</html>

Comigo deu certo ;)
BLOG Touché Criação - Vamos trocar idéias? -> http://blog.touchecriacao.com.br/
// Links úteis: Busca || Regras
// Não respondo dúvidas via mensagem privada. Use o fórum para buscar ou perguntar.

#10 Renan L. Queiroz

Renan L. Queiroz

    Mestre

  • Usuários
  • 690 posts
  • Sexo:Masculino
  • Localidade:Brasilia - DF

Posted 12/02/2008, 17:18

Renan,

achei um código na internet que captura as coordenadas do body. Dei uma adaptada nele (CSS e as divs) para tu visualizar melhor:


Maneiro Firehalk vou analizar melhor o código amanhã, mas desde já agradeço a ajuda! (y)

Especialidade: Desenvolvimento e Banco de Dados.


Este post lhe ajudou? Agradeça: Posted Image

#11 LucasMS

LucasMS

    Super Veterano

  • Usuários
  • 2076 posts
  • Sexo:Não informado

Posted 12/02/2008, 20:54

Funciona nos 2 navegadores ?



:lol: Funciona no Fx, IE7 e IE6 mas no meu caso não está se adequando!

-----

Aff, sempre assim ...

Bimonti, seguinte problema:

O evento pega as coordenadas de acordo com o browser, sendo
assim se a página tiver barra de rolagem não irá funcionar (meu caso), pois quando
o usuário desce para ver o resto e clica as coordenadas mostradas são
de acordo com a borda do browser e no meu caso preciso delas de acordo
com o body! :wacko:


para isso adicione

window.pageYOffset e window.pageXOffset

nas coordenadas x e y

para o IE as variaveis sao:

document.body.scrollTop e document.body.scrollLeft

#12 Renan L. Queiroz

Renan L. Queiroz

    Mestre

  • Usuários
  • 690 posts
  • Sexo:Masculino
  • Localidade:Brasilia - DF

Posted 13/02/2008, 09:16

para isso adicione

window.pageYOffset e window.pageXOffset

nas coordenadas x e y

para o IE as variaveis sao:

document.body.scrollTop e document.body.scrollLeft


Valeu pela ajuda!

Cara maneiro o esquema ... no Fx está ok!
Mas para o IE não estou conseguindo mesmo.

A funcção JS é a seguinte:
	if(navigator.appName == "Microsoft Internet Explorer"){

		x = event.clientX + document.body.scrollTop;
		y = event.clientY + document.body.scrollLeft;

		alert("X="+ x +" Y="+ y);
	}
	else{
		x = event.clientX + window.pageXOffset;
		y = event.clientY + window.pageYOffset;
	}

o alert ta retornando "X=0 Y=0" ...


------


Ai galera ... consegui!!!

segue código:
if(navigator.appName == "Microsoft Internet Explorer"){		x = event.clientX + document.documentElement.scrollLeft;		y = event.clientY + document.documentElement.scrollTop;	}	else{		x = event.clientX + window.pageXOffset;		y = event.clientY + window.pageYOffset;	}

LucasMS o engraçado é que o documentElement corresponde ao body certo?

Quando eu colocava "document.body.scrollLeft" o IE bão estava aceitando,
já com "document.documentElement.scrollLeft" deu tudo certo!

Obrigado a todos!

Edição feita por: Renan L. Queiroz, 13/02/2008, 09:40.

Especialidade: Desenvolvimento e Banco de Dados.


Este post lhe ajudou? Agradeça: Posted Image

#13 three

three

    Novato no fórum

  • Usuários
  • 1 posts
  • Sexo:Não informado

Posted 07/04/2008, 12:50

Eu estou querendo selecionar uma area retangular numa figura num navegador, como nas funcoes "recortar" dos editores de imagem (tipo o paint) e capturar as coordeadas x e y das extremidades do retangulo.
Como poderia fazer isso (exibindo o retangulo em linhas pontilhadas, como nas funcoes "recortar")?

Abracos

Three

#14 HaroNism

HaroNism

    Super Veterano

  • Usuários
  • 15385 posts
  • Sexo:Masculino
  • Localidade:San Miguel de Tucuman

Posted 16/09/2017, 07:01

Meds From Mexico cialis Cialis 20mg Suisse Pages Jaunes Levitra Drug Without Script Online generic cialis Tooth Abscess Antibiotics Amoxicillin
Pack cialis Keflex Absesed Tooth
Risks Generic Brands Viagra Buy Viagra Jelly Online Uk
Forum Doctissimo Cialis <a href=http://cialtobuy.com>online pharmacy</a> Didronel

#15 HaroNism

HaroNism

    Super Veterano

  • Usuários
  • 15385 posts
  • Sexo:Masculino
  • Localidade:San Miguel de Tucuman

Posted 03/10/2017, 15:37

Cephalexin Cause Throat To Swell Viagra Lvitra Propecia On Sale viagra online Buy Genuine Pfizer Viagra
Buy Accutane From Legal Chemist Cialis Pastiglie Amoxicillin Expiration viagra Propecia Length To Work
Voltar para HTML, CSS e Metodologias


2 user(s) are reading this topic

0 membro(s), 2 visitante(s) e 0 membros anônimo(s)

  1. Fórum WMO
  2. → Desenvolvimento
  3. → HTML, CSS e Metodologias
  4. Privacy Policy
  5. Regras ·
IPB Skin By Virteq