Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1656 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°668167
Muldeo
Posté le 09-03-2004 à 08:42:42  profilanswer
 

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
  14. fenetre=window.open("","son","toolbar=0,location=0,directories=0,menuBar=0,scrollbars=0,resizable=0,width=1,height=1" ); 
  15. fenetre.blur();
  16. // lorsque l'événement «relachement du bouton» se produit dans le document  
  17. // exécute la fonction mouseup
  18. document.onmouseup = mouseup
  19. function position(valeur) {
  20.  deplacement = true
  21.  objetDeplace = event.srcElement.id
  22.  positionValeur = valeur
  23. // permet de connaitre la position du coin suppérieur gauche de l'objet
  24.  coinGauche = document.all[objetDeplace].style.pixelLeft
  25.  coinHaut   = document.all[objetDeplace].style.pixelTop
  26. // permet de connaitre la position de la souris au départ du déplacement
  27.  sourisXdebut = event.clientX
  28.  sourisYdebut = event.clientY
  29. // lorsque la souris se déplace exécute la fonction deplaceImage
  30.  document.onmousemove = deplaceImage
  31. }
  32. function deplaceImage()
  33. {
  34. if(deplacement)
  35.    {
  36.  document.all[objetDeplace].style.left = coinGauche + event.clientX - sourisXdebut
  37.  document.all[objetDeplace].style.top  = coinHaut  + event.clientY - sourisYdebut
  38.  return false
  39.    }
  40. }
  41. function mouseup(){
  42.     deplacement = false
  43.     validerPosition()
  44. }
  45. function validerPosition(){
  46.  var positionXmin = new Array(4)
  47.  var positionXmax = new Array(4)
  48.  var positionXplace = new Array(3)
  49.  positionXmin[0] = 6
  50.  positionXmin[1] = 204
  51.  positionXmin[2] = 391
  52.  positionXmin[3] = 572
  53.  positionYmin = 162
  54.  positionXmax[0] = 196
  55.  positionXmax[1] = 378
  56.  positionXmax[2] = 556
  57.  positionXmax[3] = 743
  58.  positionYmax = 342
  59.  positionXplace[0] = 4
  60.  positionXplace[1] = 34
  61.  positionXplace[2] = 78
  62. // détermine si la position de l'image est bonne
  63.  continu = true
  64.  for( i=0 ; (i < 4) && continu ; i++)
  65.   {
  66.       if( (((positionXmin[i] < event.clientX) && (positionXmax[i] > event.clientX))
  67.     && ((positionYmin < event.clientY) && (positionYmax > event.clientY)))
  68.     && ( positionValeur == i))
  69.    {
  70.     fenetre.document.write('<EMBED SRC="APPLAUSE.WAV" WIDTH=145 HEIGHT=60 HIDDEN="true" AUTOSTART="true">')
  71.     document.all[objetDeplace].style.left = positionXplace[positionValeur]
  72.     document.all[objetDeplace].style.pixelTop  = positionYmin
  73.     ok.style.display = "block"
  74.     setTimeout("ok.style.display='none'",2000)
  75.     continu = false
  76.    }
  77.    }
  78.  if(continu)
  79.   {
  80.    fenetre.document.write('<EMBED SRC="RICOCHET.WAV" WIDTH=145 HEIGHT=60 HIDDEN="true" AUTOSTART="true">')
  81.    erreur.style.display = "block"
  82.    setTimeout("erreur.style.display='none'",2000)
  83.   }
  84. }
  85. //  Fin script -->
  86. </SCRIPT>
  87. </HEAD>
  88. <BODY>
  89. <FONT SIZE=5>Placer correctement chaque image dans leur case respective</FONT><br>
  90. <IMG SRC="LEDGER.GIF" BORDER=0 HEIGHT=135 STYLE="position: relative;"
  91. ID="image1"ONMOUSEDOWN="position(0)">
  92. <IMG SRC="ACRICEPR.GIF" BORDER=0 HEIGHT=135 STYLE="position: relative"
  93. ID="image2"ONMOUSEDOWN="position(1)">
  94. <IMG SRC="AG00004_.GIF" BORDER=0 HEIGHT=135 STYLE="position: relative"
  95. ID="image3"ONMOUSEDOWN="position(2)">
  96. <FONT SIZE=7 COLOR=#FF9900 STYLE="display: none; position: absolute;top=80;left=500" ID="ok">C'est bon</FONT>
  97. <FONT SIZE=7 COLOR=#FF9900 STYLE="display: none; position: absolute;top=80;left=500" ID="erreur">ERREUR</FONT>
  98. <p>
  99. <TABLE WIDTH=740 HEIGHT=150 BORDER=1 BORDERCOLOR="#000000" RULES="COLS">
  100.     <TR>
  101.       <TD></TD>
  102.       <TD></TD>
  103.       <TD></TD>
  104.       <TD></TD>
  105.     </TR>
  106. </TABLE>
  107. </BODY>
  108. </HTML>


Message édité par Muldeo le 09-03-2004 à 08:45:23
mood
Publicité
Posté le 09-03-2004 à 08:42:42  profilanswer
 

n°668168
Hermes le ​Messager
Breton Quiétiste
Posté le 09-03-2004 à 08:44:27  profilanswer
 

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

n°668171
Docteur_Ca​nard
Posté le 09-03-2004 à 08:53:56  profilanswer
 

Citation :

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


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

n°668172
Muldeo
Posté le 09-03-2004 à 08:54:21  profilanswer
 

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é.
 

n°668173
Hermes le ​Messager
Breton Quiétiste
Posté le 09-03-2004 à 08:56:42  profilanswer
 

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. ;)

n°668175
Hermes le ​Messager
Breton Quiétiste
Posté le 09-03-2004 à 08:58:01  profilanswer
 

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

n°668176
Muldeo
Posté le 09-03-2004 à 09:00:57  profilanswer
 

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.

n°668179
Docteur_Ca​nard
Posté le 09-03-2004 à 09:10:16  profilanswer
 

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
n°669238
Muldeo
Posté le 10-03-2004 à 04:28:42  profilanswer
 

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


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
validation[Résolu] Problème de mise en page en colonne sous IE
[BATCH] Problème avec reg find[CSS] position:fixed
Probleme de SetCookie sur multimania et freeProblème de requete SQL
probleme surement facile à résoudre mais me semble bizzare...![html][newb inside] personaliser un bouton radio
protection d'images par htaccess et proxy[HTML] Comment référencer son site web?
Plus de sujets relatifs à : [HTML/JS] Problème avec déplacement d'images et validation de position


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR