11480 sujets

JavaScript, DOM et API Web HTML5

Bonjour a tous,
Bien j'ai trouver ici meme un script permettant de relever a tout instant la position de la souris dans la page...

voici le script:


<html>
<head>
<script type="text/javascript">
var x=0;
var y=0;
document.onclick = position;

function position (evt) {
  if (navigator.appName=="Microsoft Internet Explorer") {
	 	x = event.x + document.body.scrollLeft;
  	y = event.y + document.body.scrollTop;
  }
  else {
	if(!evt) evt = window.event;    
	x = evt.clientX;
  y = evt.clientY;
}
</script>
  </head>
  <body onmousemove="traceMouse(event)">
    x : <input type="text" id="x"><br>
    y : <input type="text" id="y">
  </body>
</html>


Donc je suis vraiment naz en JS et j'ai pas tellement le temps ni l'envie d'ailleurs de m'y mettre...
Je n'ai pas besoin de beaucoup de JS pour mon projet... donc si vous pouviez m'aider ^^

voici:
j'aimerai reucperer la position de la souris a chaque clique... je sais que c'est possible... et ca doit pas etre compliquer en plus ^^ pour ensuite les exploiter en php... donc si elles pouvaient apparaitre dans les <input> je serai aux anges... lol

Ensuite, j'aimerai appliquer cette fonction a une image...
c'est a dire que la fonction ne marche que si je suis dans l'image...

Merci infiniment...
Bonjour.

Il me semble que le script le plus correct pour connaître la position de la souris est le suivant ( à confirmer si possible ) :
function mousePosition(e){
 var posx = 0;
 var posy = 0;
 if (!e) var e = window.event;
 if (e.pageX || e.pageY){
  posx = e.pageX;
  posy = e.pageY;
 }
 else if (e.clientX || e.clientY){
  posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
  posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
 }
 alert(posx + " " + posy);
}

Comme tu souhaites connaître la position à chaque clic il suffit de mettre :
<img ... onclick="mousePosition(event);" />

Pour passer des valeurs à PHP je ne sais pas trop comment ça se passe mais je pense qu'il y a mieux que les inputs donc je préfère que quelqu'un qui en sait plus te guide. Smiley cligne

Bonne chance.
Modifié par CNeo (01 May 2007 - 21:43)
Bien, tout d'abord merci pour cete solution qui fonctionne,
Un ami a essayé de me faire quelque chose qui marche! seulement ca marche pas ^^
Donc dans l'espoir que quelqu'un puisse m'aider...( ma page s'appelle test.php)


<html>
<head>
<script type="text/javascript">
function mousePosition(e){
 var posx = 0;
 var posy = 0;
 if (!e) var e = window.event;
 if (e.pageX || e.pageY){
  posx = e.pageX;
  posy = e.pageY;
 }
 else if (e.clientX || e.clientY){
  posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
  posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
 }
 if(document.getElementById('submitpos') && document.getElementById('posx') && document.getElementById('posy')){
 var form = document.getElementById('submitpos'); 
 var field_posx = document.getElementById('posx');
 var field_posy = document.getElementById('posy');
 field_posx.setAttribute('value',posx);
 field_posy.value = posy;
 form.submit ();
 }
}

</form> 
</script>
  </head>
  <body>
<img src="killion.jpg" onclick="mouseposition(event)" />
<form method="post" action="test.php" id="submitpos">
<input type="text" value="X" id="posx"/>
<input type="text" value="Y" id="posy"/>
</form> 
<?php 
if(isset($_POST['X']) && isset($_POST['Y']))
{
echo "ca marche ^^";
}
?>
  </body>
</html>



Merci
Bonjour
Pour récuperer la position de la souris j'utilise les deux fonctions suivante ( merci Julien Royer):

function getCursor(e) {
  e = e || window.event;
  return {'x': e.clientX, 'y': e.clientY};
}

function getScrollCursor(e){
  e = e || window.event;
  var curScrollX = (e.pageX)? e.pageX : e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
  var curScrollY = (e.pageY)? e.pageY : e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
  return {'x': curScrollX, 'y': curScrollY};
}


L'une pour récupérer par rapport a la fenêtre et l'autre par rapport à la page.

Pour récuperer les valeurs il faut faire comme ça:

var cursor = getCursor(e);
var scrollCursor = getScrollCursor(e);


Et ensuite pour x c'est cursor.x ou scrollCursor.x selon les cas.
Modifié par matmat (02 May 2007 - 19:38)
À part pour la valeur retournée la fonction que j'ai proposé et celle que tu proposes sont identiques sauf que la mienne est plus lisible par les débutants.

Pour en revenir au problème il y a un "</form>" qui se promène dans ta page et qui ne devrait pas être là.
bonjour

cependant, si le body est centré par rapport à la page (selon la nature de l'écran de votre ordinateur), cela fausse tout car les coodonnées de la souris tellle que vous les calculées ici n'en tiennent par compte. Si vous avez des idées, je suis preneur.

merci