[HTML/JS] Problème avec déplacement d'images et validation de position

Problème avec déplacement d'images et validation de position [HTML/JS] - HTML/CSS - Programmation

Marsh Posté le 09-03-2004 à 08:42:42    

Salut,
Mon prof nous à donné cet exemple. En gros ce que ça fait, c'est qu'on doit placer les images dans la bonne case d'un tableau. Si on la place au bon endroit, ça écrit "C'est bon", sinon ça écrit "Erreur" et ca fait un son différent selon si c'est bon ou non. Quand j'utilisais cet exemple en l'exécutant directement dans le dossier du prof sur le serveur du cégep, ça fonctionnait correctement. Je me suis fait un copie et quand je l'exécute chez nous, à l'ouverture de la page, ça me dit qu'il y a une erreur à la ligne 14 et lorsque je clique sur une image pour la déplacer, lorsque je relache le bouton de la souris pour placer l'image, l'image ne se place pas et continue à se déplacer avec mon curseur, comme si je n'avait pas relaché le bouton de la souris. J'ai essayer de trouver le problème mais je n'y arrive pas. J'apprécierais grandement votre aide.
Merci d'avance.
 
Voici le code:
 

Code :
  1. <!-- saved from url=(0022)http://internet.e-mail -->
  2. <HTML>
  3. <!-- DATE DE CREATION: 14/01/04 -->
  4. <HEAD>
  5. <TITLE></TITLE>
  6. <META NAME="Description" CONTENT="">
  7. <META NAME="Keywords" CONTENT="">
  8. <META NAME="Author" CONTENT="">
  9. <META NAME="Generator" CONTENT="WebExpert 2000">
  10. <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
  11. <SCRIPT LANGUAGE="JavaScript1.3">
  12. <!-- Debut script
  13. // ouvrir une fenêtre en arrière plan pour contrôler le son
  15. fenetre=window.open("","son","toolbar=0,location=0,directories=0,menuBar=0,scrollbars=0,resizable=0,width=1,height=1" ); 
  16. fenetre.blur();
  21. // lorsque l'événement «relachement du bouton» se produit dans le document  
  22. // exécute la fonction mouseup
  24. document.onmouseup = mouseup
  26. function position(valeur) {
  27.  deplacement = true
  28.  objetDeplace = event.srcElement.id
  30.  positionValeur = valeur
  32. // permet de connaitre la position du coin suppérieur gauche de l'objet
  34.  coinGauche = document.all[objetDeplace].style.pixelLeft
  35.  coinHaut   = document.all[objetDeplace].style.pixelTop
  37. // permet de connaitre la position de la souris au départ du déplacement
  39.  sourisXdebut = event.clientX
  40.  sourisYdebut = event.clientY
  42. // lorsque la souris se déplace exécute la fonction deplaceImage
  44.  document.onmousemove = deplaceImage
  45. }
  47. function deplaceImage()
  48. {
  49. if(deplacement)
  50.    {
  51.  document.all[objetDeplace].style.left = coinGauche + event.clientX - sourisXdebut
  52.  document.all[objetDeplace].style.top  = coinHaut  + event.clientY - sourisYdebut
  53.  return false
  54.    }
  55. }
  57. function mouseup(){
  58.     deplacement = false
  59.     validerPosition()
  60. }
  62. function validerPosition(){
  64.  var positionXmin = new Array(4)
  65.  var positionXmax = new Array(4)
  66.  var positionXplace = new Array(3)
  68.  positionXmin[0] = 6
  69.  positionXmin[1] = 204
  70.  positionXmin[2] = 391
  71.  positionXmin[3] = 572
  72.  positionYmin = 162
  74.  positionXmax[0] = 196
  75.  positionXmax[1] = 378
  76.  positionXmax[2] = 556
  77.  positionXmax[3] = 743
  78.  positionYmax = 342
  80.  positionXplace[0] = 4
  81.  positionXplace[1] = 34
  82.  positionXplace[2] = 78
  84. // détermine si la position de l'image est bonne
  86.  continu = true
  88.  for( i=0 ; (i < 4) && continu ; i++)
  89.   {
  90.       if( (((positionXmin[i] < event.clientX) && (positionXmax[i] > event.clientX))
  91.     && ((positionYmin < event.clientY) && (positionYmax > event.clientY)))
  92.     && ( positionValeur == i))
  93.    {
  94.     fenetre.document.write('<EMBED SRC="APPLAUSE.WAV" WIDTH=145 HEIGHT=60 HIDDEN="true" AUTOSTART="true">')
  95.     document.all[objetDeplace].style.left = positionXplace[positionValeur]
  96.     document.all[objetDeplace].style.pixelTop  = positionYmin
  97.     ok.style.display = "block"
  98.     setTimeout("ok.style.display='none'",2000)
  99.     continu = false
  100.    }
  101.    }
  102.  if(continu)
  103.   {
  104.    fenetre.document.write('<EMBED SRC="RICOCHET.WAV" WIDTH=145 HEIGHT=60 HIDDEN="true" AUTOSTART="true">')
  105.    erreur.style.display = "block"
  106.    setTimeout("erreur.style.display='none'",2000)
  107.   }
  108. }
  109. //  Fin script -->
  110. </SCRIPT>
  112. </HEAD>
  113. <BODY>
  114. <FONT SIZE=5>Placer correctement chaque image dans leur case respective</FONT><br>
  116. <IMG SRC="LEDGER.GIF" BORDER=0 HEIGHT=135 STYLE="position: relative;"
  117. ID="image1"ONMOUSEDOWN="position(0)">
  118. <IMG SRC="ACRICEPR.GIF" BORDER=0 HEIGHT=135 STYLE="position: relative"
  119. ID="image2"ONMOUSEDOWN="position(1)">
  120. <IMG SRC="AG00004_.GIF" BORDER=0 HEIGHT=135 STYLE="position: relative"
  121. ID="image3"ONMOUSEDOWN="position(2)">
  123. <FONT SIZE=7 COLOR=#FF9900 STYLE="display: none; position: absolute;top=80;left=500" ID="ok">C'est bon</FONT>
  124. <FONT SIZE=7 COLOR=#FF9900 STYLE="display: none; position: absolute;top=80;left=500" ID="erreur">ERREUR</FONT>
  126. <p>
  127. <TABLE WIDTH=740 HEIGHT=150 BORDER=1 BORDERCOLOR="#000000" RULES="COLS">
  128.     <TR>
  129.       <TD></TD>
  130.       <TD></TD>
  131.       <TD></TD>
  132.       <TD></TD>
  133.     </TR>
  134. </TABLE>
  135. </BODY>
  136. </HTML>


Message édité par Muldeo le 09-03-2004 à 08:45:23
Reply

Marsh Posté le 09-03-2004 à 08:42:42   

Reply

Marsh Posté le 09-03-2004 à 08:44:27    

Met tout ça sur internet STP. Qu'on puisse tester sans devoir tout recopier sur son éditeur.

Reply

Marsh Posté le 09-03-2004 à 08:53:56    

Citation :

coinGauche = document.all[objetDeplace].style.pixelLeft


 
C'est mal parti déjà [:meganne]

Reply

Marsh Posté le 09-03-2004 à 08:54:21    

hermes le messager a écrit :

Met tout ça sur internet STP. Qu'on puisse tester sans devoir tout recopier sur son éditeur.


 
Malheureusemnt, j'ai nul part ou mettre ça. Désolé.
 

Reply

Marsh Posté le 09-03-2004 à 08:56:42    

Muldeo a écrit :


 
Malheureusemnt, j'ai nul part ou mettre ça. Désolé.
 
 


 
Si tu veux qu'on puisse t'aider régulièrement, ouvre un compte sur voila ou n'importe quel hébergeur gratuit pas trop chiant (l'idéal étant un compte free).
;)
 
Parcr que sinon c'est vraiment pénible de devoir ouvrir son éditeur et recopier tous les codes qui trainent ici et là, quand parfois la solution est toute bête et nécessite juste la visualisation du problème. ;)

Reply

Marsh Posté le 09-03-2004 à 08:58:01    

Ah !! Et un autre détail : Mets les ; partout où il faut STP...

Reply

Marsh Posté le 09-03-2004 à 09:00:57    

hermes le messager a écrit :


 
Si tu veux qu'on puisse t'aider régulièrement, ouvre un compte sur voila ou n'importe quel hébergeur gratuit pas trop chiant (l'idéal étant un compte free).
;)
 
Parcr que sinon c'est vraiment pénible de devoir ouvrir son éditeur et recopier tous les codes qui trainent ici et là, quand parfois la solution est toute bête et nécessite juste la visualisation du problème. ;)
 


 
Ok, je vais le savoir pour la prochaine fois. Pour tout de suite, je n'ai pas vraiment le temps d'aller m'ouvrir un compte. Je peux toujours envoyer ça par mail à l'un d'entre vous qui pourrait mettre ça sur internet si vous voulez.

Reply

Marsh Posté le 09-03-2004 à 09:10:16    

Muldeo a écrit :


 
Ok, je vais le savoir pour la prochaine fois. Pour tout de suite, je n'ai pas vraiment le temps d'aller m'ouvrir un compte. Je peux toujours envoyer ça par mail à l'un d'entre vous qui pourrait mettre ça sur internet si vous voulez.
 


 
MP :hello:
 
Edit : http://cmotsch.free.fr/taist/puzzz.html


Message édité par Docteur_Canard le 09-03-2004 à 09:33:07
Reply

Marsh Posté le 10-03-2004 à 04:28:42    

Ok, ça fonctionne, c cool.
Merci.  :)  
 
Te souviens-tu c'était quoi l'erreur?
Sinon, c pas grave, en autant que ça marche.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed