Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1184 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
  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
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

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.068 secondes

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