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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [RESOLU] [JS] Echanger deux images

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[RESOLU] [JS] Echanger deux images

n°1973896
Fork Bomb
Obsédé textuel
Posté le 15-03-2010 à 13:34:26  profilanswer
 

Bonjour.
Dans le cadre d'exercices de fabrication de pages web avec JS, on nous avait demandé il y a quelques semaines de créer un formulaire d'échanges de deux images.
J'ai eu beau retourner ce problème dans tous les sens, je n'ai JAMAIS réussi a faire fonctionner ce script comme je l'entendais. Tout au plus, je peux echanger deux images mais PAS revenir au point de départ.. :/
La question n'est pas de me donner du code, mais de m'expliquer POURQUOI mon code ne fonctionne pas.
 
---
 

Code :
  1. <html>
  2. <head>
  3. <title>Formulaire d'&eacute;change d'images</title>
  4. <script language="Javascript">
  5. function clickette()
  6. {
  7. // Si escargot a l'url de fleur (donc, apres le premeir clic sur le bouton)
  8. if (document.getElementById('escargot').src==document.getElementById('fleur_cachee').value)
  9. {
  10. // Alors escargot prend l'url de escargot et fleur l'url de fleur
  11. document.getElementById('escargot').src=document.getElementById('escargot_cache').value;
  12. document.getElementById('fleur').src=document.getElementById('fleur_cachee').value;
  13. }
  14. else
  15. // Sinon, escargot prend l'url de fleur et fleur prend l'url de escargot
  16. {
  17. document.getElementById('escargot').src=document.getElementById('fleur_cachee').value;
  18. document.getElementById('fleur').src=document.getElementById('escargot_cache').value;
  19. }
  20. }
  21. </script>
  22. </head>
  23. <body>
  24. <!-- Aide : http://www.ac-creteil.fr/util/prog [...] mages.html -->
  25. <form name="changement" action="post">
  26. <input type="hidden" id="fleur_cachee" value="img/triFoliumBleu.png">
  27. <input type="hidden" id="escargot_cache" value="img/escargotViolet.png">
  28. <img src="img/escargotViolet.png" id="escargot" />
  29. <input type="button" value="<<--->>" onClick="clickette();" />
  30. <img src="img/triFoliumBleu.png" id="fleur" />
  31. </form>
  32. </body>
  33. </head>
  34. </html>


Message édité par Fork Bomb le 15-03-2010 à 16:36:11

---------------
Décentralisons Internet-Bépo-Troll Bingo - "Pour adoucir le mélange, pressez trois quartiers d’orange !"
mood
Publicité
Posté le 15-03-2010 à 13:34:26  profilanswer
 

n°1973900
kao98
...
Posté le 15-03-2010 à 13:44:30  profilanswer
 

Tu te complique beaucoup trop la tâche. Va au plus simple.
 
Tu as deux variables a et b. Comment tu inverses leurs valeurs respectives ? Le plus simplement du monde ?


---------------
Kao ..98 - Uplay (R6S) : kao98.7.62x39 - Origin (BF4, BF1) : kntkao98
n°1973903
Fork Bomb
Obsédé textuel
Posté le 15-03-2010 à 13:49:19  profilanswer
 

kao98 a écrit :

Tu te complique beaucoup trop la tâche. Va au plus simple.
 
Tu as deux variables a et b. Comment tu inverses leurs valeurs respectives ? Le plus simplement du monde ?


Oui, je sais.
Il faut utiliser un temp.
Bizarrement, autant ça me parait "normal" en prog' "classique", autant, quand c'est JS... ben non :(
Pour me rassurer, je préfère avoir deux variables con-con desquelles je ne modifie pas la valeur (et je tape dedans pour avoir mes src) plutôt que le classique "2 valeurs a échanger, donc une valeur tampon à ajouter".


---------------
Décentralisons Internet-Bépo-Troll Bingo - "Pour adoucir le mélange, pressez trois quartiers d’orange !"
n°1973904
kao98
...
Posté le 15-03-2010 à 13:53:43  profilanswer
 

Fork Bomb a écrit :


Oui, je sais.
Il faut utiliser un temp.
Bizarrement, autant ça me parait "normal" en prog' "classique", autant, quand c'est JS... ben non :(
Pour me rassurer, je préfère avoir deux variables con-con desquelles je ne modifie pas la valeur (et je tape dedans pour avoir mes src) plutôt que le classique "2 valeurs a échanger, donc une valeur tampon à ajouter".


Qu'est-ce qui t'échappe ? Parce que c'est pourtant la même chose !
Déjà, un truc qui ne va pas dans ton code, c'est que tu utilises des champs HTML (les hidden) comme des variables js. Pourquoi ne pas utiliser une (ou plusieurs si tu veux) variables js plutôt que de tout mélanger ?
 
Commence par le commencement : l'algo de base de ce problème, lequel est-il ? :o

Message cité 1 fois
Message édité par kao98 le 15-03-2010 à 13:54:59

---------------
Kao ..98 - Uplay (R6S) : kao98.7.62x39 - Origin (BF4, BF1) : kntkao98
n°1973943
Fork Bomb
Obsédé textuel
Posté le 15-03-2010 à 15:28:37  profilanswer
 

kao98 a écrit :


Qu'est-ce qui t'échappe ? Parce que c'est pourtant la même chose !
Déjà, un truc qui ne va pas dans ton code, c'est que tu utilises des champs HTML (les hidden) comme des variables js. Pourquoi ne pas utiliser une (ou plusieurs si tu veux) variables js plutôt que de tout mélanger ?

 

Commence par le commencement : l'algo de base de ce problème, lequel est-il ? :o


Si je le savais, mon problème serait résolu depuis longtemps et ça me prendrait pas la tête :/
---
EDIT : J'ai mal lu la question.
---
EDIT2
Si l'image de gauche n'a pas la "bonne" url (par rapport à la disposition de départ)
alors, on inverse les deux images
Sinon
on remet les deux images "correctement"

Message cité 1 fois
Message édité par Fork Bomb le 15-03-2010 à 15:32:40

---------------
Décentralisons Internet-Bépo-Troll Bingo - "Pour adoucir le mélange, pressez trois quartiers d’orange !"
n°1973944
kao98
...
Posté le 15-03-2010 à 15:35:57  profilanswer
 

Fork Bomb a écrit :


Si je le savais, mon problème serait résolu depuis longtemps et ça me prendrait pas la tête :/
---
EDIT : J'ai mal lu la question.


Non, c'est pas ça !
C'est encore plus simple ! C'est juste de l'inversion, c'est tout !
 
a est une variable  
b est une variable  
temp est une variable  
 
temp := a
a := b
b := temp
 
 
 
Il suffit de :
- transposer ça en js
- faire pour que, dans notre cas, a référence directement à la première image, et b à la seconde
 
Tu sais, le fait que ce soit du js, ça ne change rien à l'algo de départ !


Message édité par kao98 le 15-03-2010 à 15:41:22

---------------
Kao ..98 - Uplay (R6S) : kao98.7.62x39 - Origin (BF4, BF1) : kntkao98
n°1973952
Fork Bomb
Obsédé textuel
Posté le 15-03-2010 à 16:21:01  profilanswer
 

Code :
  1. <html>
  2. <head>
  3. <title>Formulaire d'&eacute;change d'images</title>
  4. <script language="Javascript">
  5. function clickette()
  6. {
  7. temp=document.getElementById('escargot').src;
  8. document.getElementById('escargot').src=document.getElementById('fleur').src;
  9. document.getElementById('fleur').src=temp;
  10. }
  11. </script>
  12. </head>
  13. <body>
  14. <!-- Aide : http://www.ac-creteil.fr/util/prog [...] mages.html -->
  15. <form name="changement" action="post">
  16. <img src="img/escargotViolet.png" id="escargot" />
  17. <input type="button" value="<<--->>" onClick="clickette();" />
  18. <img src="img/triFoliumBleu.png" id="fleur" />
  19. </form>
  20. </body>
  21. </head>
  22. </html>


 
Bon, celui-là fonctionne ad vitam aeternam sans que je comprenne pourquoi.
Je ne fait aucune vérif' (pas if...then...else), je n'utilise plus de champ caché et pourtant... ça marche T_T
Juste le coup du fichier "temp" qui me permet quand même de faire les échanges à l'infini...
Comprends pô :/


---------------
Décentralisons Internet-Bépo-Troll Bingo - "Pour adoucir le mélange, pressez trois quartiers d’orange !"
n°1973958
kao98
...
Posté le 15-03-2010 à 16:28:04  profilanswer
 

Fork Bomb a écrit :


 
Bon, celui-là fonctionne ad vitam aeternam sans que je comprenne pourquoi.
Je ne fait aucune vérif' (pas if...then...else), je n'utilise plus de champ caché et pourtant... ça marche T_T
Juste le coup du fichier "temp" qui me permet quand même de faire les échanges à l'infini...
Comprends pô :/


Tu ne comprends pas ? C'est pourtant super simple !!
 
Bon, pour simplifier, on va parler de a et de b à la place de tes images, mais ça revient au même.
 
Au départ, on a quelque chose comme
a = "chemin1"
b = "chemin2"
 
Quand on clique sur le bouton, on exécute ton code JS.
La première ligne :
temp = a
 
temp prend la valeur de a, et contient donc "chemin1".
a contient toujours "chemin1", et b "chemin2"
 
Ensuite, on fait
a = b
Donc a = "chemin2"
A ce moment là, on a a qui contient "chemin2", b contient également "chemin2", et temp contient "chemin1".
 
Enfin, on fait  
b = temp
donc on place la valeur de temp dans b, donc b contient à présent "chemin1". Et voilà, nos valeurs sont inversée ! Il n'y a pas de magie là dedans !
 
C'est plus clair comme ça ?
Le principe, c'est pas de vérifier ce que contiennent nos variables, c'est de les inverser, tout simplement.


Message édité par kao98 le 15-03-2010 à 16:30:09

---------------
Kao ..98 - Uplay (R6S) : kao98.7.62x39 - Origin (BF4, BF1) : kntkao98
n°1973960
Fork Bomb
Obsédé textuel
Posté le 15-03-2010 à 16:30:37  profilanswer
 

Ce qui m'échappe, c'est POURQUOI mes valeurs continuent de tourner.
Qu'elles tournent UNE FOIS, c'est normal, je l'ai écrit.
Mais... les autres tours ? :/


---------------
Décentralisons Internet-Bépo-Troll Bingo - "Pour adoucir le mélange, pressez trois quartiers d’orange !"
n°1973962
kao98
...
Posté le 15-03-2010 à 16:33:09  profilanswer
 

Fork Bomb a écrit :

Ce qui m'échappe, c'est POURQUOI mes valeurs continuent de tourner.
Qu'elles tournent UNE FOIS, c'est normal, je l'ai écrit.
Mais... les autres tours ? :/


Parce qu'on les inverse, quoi qu'elle contiennent !
 
C'est pourtant pas sorcier !
 
Bon, pour prendre un exemple trèèèès imagé :
 
Si tu as une tasse pleine de café, et une autre pleine de thé.
Si tu veux inverser leur contenu, tu prends une tasse vide, tu verse la tasse 1 dans la tasse temp, puis la tasse 2 dans la tasse 1, puis la tasse temps dans la tasse 2.
 
Si tu répètes l'opération, tu interverti à chaque fois le contenu de tes tasses :spamafote:
 
C'est de l'inversion, quel que soit la valeur de tes variables, on les inverses !


Message édité par kao98 le 15-03-2010 à 16:34:06

---------------
Kao ..98 - Uplay (R6S) : kao98.7.62x39 - Origin (BF4, BF1) : kntkao98
mood
Publicité
Posté le 15-03-2010 à 16:33:09  profilanswer
 

n°1973965
Fork Bomb
Obsédé textuel
Posté le 15-03-2010 à 16:35:37  profilanswer
 

Ah oui, merde. Quel boulet >.<
---
Merci pour ta patience :)


---------------
Décentralisons Internet-Bépo-Troll Bingo - "Pour adoucir le mélange, pressez trois quartiers d’orange !"

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

  [RESOLU] [JS] Echanger deux images

 

Sujets relatifs
[résolu] Parcourir un objet?[Resolu] JS s'arrete de s'executer...
[Résolu] Problème de socket urlretrieve[PHP/JS] Séparer un mp3 sans plomber le serveur ?
[RESOLU] Récupération valeur bouton radio et textarea - formulaire[Résolu] Problème Http -> Https
[Résolu] referencer des instances creees par une fonction...[resolu]compatibilité ie6 ie7 mais bug anim flash
Plus de sujets relatifs à : [RESOLU] [JS] Echanger deux images


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