liste de coordonnée d'une image

25 août 2008, 20:42

Bonjour,

Voilà, je voudrais faire une page web qui lirait un fichier texte (fichier texte qui contient des positions sous x:y) et j'aimerais que l'image bouge dynamiquement grace au position indiqué dans le fichier texte,

Voilà ce que j'ai deja fait :

Code : Tout sélectionner

<html>
<head>
<script language="JavaScript">
var hautimage = 0;
var gaucheimage = 0;
	function submitForm()
	{ 
		var req = null; 

		document.ajax.dyn.value="Started...";
		if(window.XMLHttpRequest)
			req = new XMLHttpRequest(); 
		else if (window.ActiveXObject)
			req  = new ActiveXObject(Microsoft.XMLHTTP); 

		req.onreadystatechange = function()
		{ 
			document.ajax.dyn.value="Wait server...";
			if(req.readyState == 4)
			{
				if(req.status == 200)
				{
					document.ajax.dyn.value=req.responseText;	
					var brokenstring=req.responseText.split(":"); 
					x = brokenstring[0];
                    y = brokenstring[1];
				}	
				else	
				{
					document.ajax.dyn.value="Error: returned status code " + req.status + " " + req.statusText;
				}	
			} 
		}; 
		req.open("GET", "position.txt", true); 
		req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
		req.send(null); 
	

        hautimage = y;
        gaucheimage = x;
        document.getElementById("smile").style.top = hautimage;
        document.getElementById("smile").style.left = gaucheimage;
        
    }
</SCRIPT>
</head>
	<body onload="submitForm();">
<SCRIPT LANGUAGE="javascript">
document.write('<IMG SRC="image.gif" ID="smile" STYLE="position:absolute;top:'+hautimage+';left:'+gaucheimage+'">');
</SCRIPT>
<FORM name="ajax" method="POST" action="">
			
  <p>
    <INPUT type="BUTTON" value="Submit"  ONCLICK="submitForm()">
  </p>
  <p>
    <input type="text" name="dyn" size="32" value="">
  </p>
</FORM>

mais on est obligé d'appuyer deux fois sur le bouton submit, et sa ne lis que la premiére position,
Je vous demande de l'aide svp ...

Merci d'avance

Edit : voilà ce que j'ai essayé, mais sa ne fonctionne toujours pas :

Code : Tout sélectionner

<head>
<script language="JavaScript">
var hautimage = 0;
var gaucheimage = 0;
	function submitForm()
	{ 
		var req = null; 

		document.ajax.dyn.value="Started...";
		if(window.XMLHttpRequest)
			req = new XMLHttpRequest(); 
		else if (window.ActiveXObject)
			req  = new ActiveXObject(Microsoft.XMLHTTP); 

		req.onreadystatechange = function()
		{ 
			document.ajax.dyn.value="Wait server...";
			if(req.readyState == 4)
			{
				if(req.status == 200)
				{
					document.ajax.dyn.value=req.responseText;	
					var brokenstring=req.responseText.split("\n"); 
                    var acv = 0;
					var afe = 0;
                     while (acv != 1000)
{
					 brokenstring[acv]=req.responseText.split(":");
					 x[afe] = brokenstring[acv][0];
					 y[afe] = brokenstring[acv][1];
					 azer = y[afe];
					 neuf = x[afe];
					 document.getElementById("smile").style.top = azer;
                     document.getElementById("smile").style.left = neuf;
					 afe ++;
					 acv ++;

					 }
				}	
				else	
				{
					document.ajax.dyn.value="Error: returned status code " + req.status + " " + req.statusText;
				}	
			} 
		}; 
		req.open("GET", "test.txt", true); 
		req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
		req.send(null); 
	

        
    }
</SCRIPT>
</head>
	<body onload="submitForm();">
<SCRIPT LANGUAGE="javascript">
document.write('<IMG SRC="image.gif" ID="smile" STYLE="position:absolute;top:'+azer+';left:'+neuf+'">');

</SCRIPT>
<FORM name="ajax" method="POST" action="">
			
  <p>
    <INPUT type="BUTTON" value="Submit"  ONCLICK="submitForm()">
  </p>
  <p>
    <input type="text" name="dyn" size="32" value="">
  </p>
</FORM>
</body>
</html>

En fait, c'est censé lire un fichier texte avec des positions de dans, des positions genre 50:45, une position par ligne, et c'est censé bouger l'image dynamiquement selon les positions ...

Voilà merci d'avance

25 août 2008, 23:24

Il faut affecter directement les coordonnées (x:y) lus à l'image "smile" sans passer par des variables intermédiaires.
Peut être ce qui t'échappe est que la fonction Ajax s'exécute en parallèle (asynchrone) et non en séquentiel avec le code que tu as mis en bas. Ce qui veut dire qu'on ne sait pas quand Ajax recevera la réponse (qui sont les x:y lus) c'est pourquoi il faut les affecter à l'image immédiatement après leur réception : c'est à dire dans l'événement onreadystatechange.

Voici le corrigé:

Code : Tout sélectionner

<html>
<head>
<script type="text/javascript">
function submitForm()
{
	var req = null;
	//
    document.ajax.dyn.value = "Started...";
	//
	if(window.XMLHttpRequest) 		req = new XMLHttpRequest();
	else if (window.ActiveXObject)  req = new ActiveXObject(Microsoft.XMLHTTP);
	//
	req.onreadystatechange = function()
	{
		document.ajax.dyn.value = "Waiting server...";
		if(req.readyState == 4)
		{
			if(req.status == 200)
			{
               document.ajax.dyn.value = "Position: " + req.responseText;   
               var brokenstring = req.responseText.split(":");
               document.getElementById("smile").style.left = parseInt(brokenstring[0] ||0);
               document.getElementById("smile").style.top  = parseInt(brokenstring[1] ||0);
            }   
            else   
            {
               document.ajax.dyn.value = "Error: (" + req.status + ") " + req.statusText;
            }   
         }
      };
	  //
      req.open("get", "position.txt", true);
      //req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      req.send(null);
}
</script>
</head>
<body>
<form name="ajax" method="get" action=""> 
  <p>
    <input type="text" name="dyn" size="32" value="" /><input type="button" value="submit"  onclick="submitForm()" />
  </p>
</form>
<img src="image.gif" id="smile" style="position:relative" />
</body>
</html>

25 août 2008, 23:26

je te remercie

EDIT : encore une petite info svp, si dans mon fichier texte j'ai sa :

54:54
65:89
45:41
etc ...

Es ce que puis-je faire en sorte que dés que j'appuie sur le bouton submit, l'image bouge suivant les positions, par exemple au début elle va à la position 54:54, ensuite immédiatement à la position 65:89 etc ...

Merci d'avance

26 août 2008, 09:37

Oui mais il faut qu'un programme php le fasse grâce à un compteur de lignes que ton bouton incrémente après chaque lecture déclenchée par Ajax.

Voici l'algorithme de l'idée :

1. Un compteur (variable javascript globale) est initialisé à 1 au départ. Il servira à désigner la ligne du fichier position.txt qu'il faut lire.
2. Sur clic du bouton submit, Ajax appelle le programme PHP en lui envoyant comme paramètre le compteur.
3. Le programme PHP reçoit le compteur comme paramètre, lit le fichier à la ligne indiquée par le compteur reçu et renvoi un echo de la ligne lu. Bien sur, en cas d'erreur, si aucun compteur n'est reçu ou si le compteur est erroné et ne désigne aucune ligne correcte du fichier, le programme renvoi un echo vide.
4. Quand Ajax reçoit la réponse de PHP, il a soit une donnée x:y ou du vide. si la donnée x:y est bien reçue on affecte séparément les coordonnées à l'image "smile" puis on incrémente le compteur global des lignes pour la lecture suivante. (il ne faut pas oublier de réinitialiser le compteur à 1 en cas de donnée vide reçu par Ajax de PHP car cela signifie que le compteur est erroné et que PHP n'a lu aucune ligne)

Pour info, en PHP pour lire un fichier texte voir les instructions : fopen(), fgets(), feof(), fclose()

liste de coordonnée d'une image

Qui est en ligne