problème de d'évènement javascript

problème difficile à décrire

Sujet résolu

13 mai 2010 à 18:22:08

Bonjour à tous/toutes

,

Voilà mon problème :
je suis en train de réaliser une petite page web qui me permmettra d'obtenir le code html correspondant à une image avec plein de petites divs flottantes sur les têtes des gens. Vous voyez ce que je veux dire ? C'est en gros une identification de photos à la Facebook.

Le petit problème c'est que je n'arrive pas à exécuter un onmousemove avec un onclick... voilà mon code :

(Notez que je n'ai pratiquement aucune connaissance en javascript... juste la base et le calcul des coordonné à été copier du sdz :euh:

)

<html>
<head>

<style type="text/css">
#MouseFollow
{
position : absolute;
visibility : hidden;
height : 40px; 
width : 40px; 
border : green 1px solid;
}
</style>
<script type="text/javascript">
function souris(event)
{
   //dimension boîte
  var largeur = document.getElementById('MouseFollow').style.height;
  var hauteur = document.getElementById('MouseFollow').style.width;
  
	//position souris
  var x = event.clientX;
  var y = event.clientY;
   //affichage position
  document.getElementById('coordonnes').value = x + ', ' + y;
   //application à la boîte (le centrage de la boîte ne fonctionne pas non plus)
  var element = document.getElementById('MouseFollow');
  element.style.visibility = 'visible';
  element.style.left = x - largeur / 2 + 'px';
  element.style.top = y - hauteur / 2 + 'px';
}
function flash()
{
alert(x + ', ' + y);
}
</script>
</head>
<body onmousemove="souris(event)">


<div style="height : auto; border : red 1px solid;" >
	<div id="MouseFollow" onclick="flash();" ><!-- c'est ce onclick qui ne fonctionne pas à cause du onmousemove -->
	</div>

<img src="photo_de_classe.jpg"  />
</div>
<input type="text" id="coordonnes" value="inconnues" readonly="readonly" />
<div id="previewDiv" style="border: 1px dashed #000000; padding: 0.2em;"></div>
</body>
</html>

Voilà le script n'est pas encore à ça finition, mais le reste je m'en occuperais, ce qu'il me faut c'est la solution du problème en cours... Merci d'avance !

Golmote

14 mai 2010 à 2:21:38

Tes variables x et y sont définies localement à la fonction souris(). Elles ne sont donc pas définies dans la fonction flash().

Des connaissances en JS t'auraient surement évité ce problème :-°

Tout sur le JavaScript

Captain Spic

14 mai 2010 à 18:46:52

salut !

Mes variables x et y ne sont pas définie c'est vrai

mais quand bien même une boîte d'information devrait m'indiquer ", " ce qu'elle ne fait pas ! enfaite elle n'apparaît même pas.

J'ai définie mes variables, et comme prévu, rien n'a changé :'(

le problème persiste...

je suis en cour de lecture de ce cour

mais c'est long...

Merci d'avance

Tillertan

14 mai 2010 à 18:53:38

Non ça n'affiche pas "," mais une erreur console "Undefined variable blabla.."

Vires le "var" devant de var x et var y dans mousemove et basta.

Captain Spic

14 mai 2010 à 19:13:17

salut,

J'ai pas tout compris... j'ai viré le var devant x et y dans la fonction souris(event) et dans flash... rien de changer

EDIT : Par contre je viens de voir que si je remplaçais le onclick="flsah();" par onclick="flash(event);" et que je renommais la fonction flash() en flash(event) ça marche !!
donc merci quand même

Bonne continuation

PS le code final :

<html>
<head>

<style type="text/css">
body
{
cursor: url ("ciblefini2.cur"), auto;
}

#MouseFollow
{
position : absolute;
visibility : hidden;
height : 40px; 
width : 40px; 
border : green 1px solid;
}
</style>
<script type="text/javascript">
function souris(event)
{
   //dimension boîte
  var largeur = document.getElementById('MouseFollow').style.height;
  var hauteur = document.getElementById('MouseFollow').style.width;
  
	//position souris
   x = event.clientX;
   y = event.clientY;
   //affichage position
  document.getElementById('coordonnes').value = x + ', ' + y;
   //application à la boîte
  var element = document.getElementById('MouseFollow');
  element.style.visibility = 'visible';
  element.style.left = x - largeur / 2 + 'px';
  element.style.top = y - hauteur / 2 + 'px';
}
function flash(event)
{
   x = event.clientX;
   y = event.clientY;
alert(x + ', ' + y);
}
</script>
</head>
<body onmousemove="souris(event)">


<div style="height : auto; border : red 1px solid;" >
	<div id="MouseFollow" onclick="flash(event);" >
	</div>

<img src="photo_de_classe.jpg"  />
</div>
<input type="text" id="coordonnes" value="inconnues" readonly="readonly" />
<div id="previewDiv" style="border: 1px dashed #000000; padding: 0.2em;"></div>
</body>
</html>