Intervertir deux images

3 pièce(s) jointe(s)

Bonjour, je souhaite réaliser l'exercice suivant : Intervertir deux images lorsqu'on clique sur un bouton (Les 2 images ainsi que le bouton sont sur une même ligne dans trois cellules d'un même tableau) et lorsqu'on clique à nouveau les deux images reviennent à leur place d'origine.
Ci-joint mon fichier.
J'ai du mal à le réaliser, si quelqu'un veut bien me filer un coup de main, ce ne sera pas de refus.
Merci d'avancePièce jointe 219554 Pièce jointe 219555 Pièce jointe 219556

Cette solution, peut-être?

Code:

1
2
3
4
5
 
function clickette () {
document.getElementById("image1").className="propriete2";
document.getElementById("image2").className="propriete1";
}

Bonjour,
tu aurais pu mettre ton code directement dans ta discussion, ceci étant je reprend ta fonction
Code:

1 2 3 4 5 6 function clickette () { temp=document.getElementById('image1').src; document.getElementById('image1').src=document.getElementById('image2').src; document.getElementById('image2').src=temp; }
et le HTML concerné
Code:

1 2 3 4 5 6 7 <tr> <td class="propriete1" id="image1"></td> <td> <div class="button"></div> <input type="Button" value="Switch image" onClick="clickette();"></td> <td class="propriete2" id="image2"></td> </tr>
Maintenant observons document.getElementById('image1').src, le résultat sera undefined car ton élément, pour rappel <td class="propriete1" id="image1"></td> n'a pas de propriété src.

Comme tu travailles avec des images en background, autant modifier simplement la className de tes éléments.
Code:

1 2 3 4 5 6 function clickette() { var temp = document.getElementById('image1').className; document.getElementById('image1').className = document.getElementById('image2').className; document.getElementById('image2').className = temp; }
Juste pour dire, ton code HTML est mal formé et à quoi te sert l'utilisation d'un <form> ?

Ça c'est de la réactivité ou je ne m'y connais pas ! Merci pour vos réponses.
Je vais essayer tout cela et je vous redis.
Merci

1 pièce(s) jointe(s)

Intervertir des images

Super, ça marche. Merci beaucoup.
Je reviens à :"Juste pour dire, ton code HTML est mal formé et à quoi te sert l'utilisation d'un <form> ?"

Concernant "<form>", c'est dans mes notes de cours à distance, je n'ai pas du bien comprendre sur le moment. (je vais voir un peu plus )
Je veux bien toutes les critiques sur mon fichier html, en pièce jointe. Merci NoSmoking.

Dans ta nouvelle mouture HTML à savoir
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <body> <table border="1"> <tr> <td class="propriete1" id="image1"></td> <td> <div class="button"></div> <input type="Button" value="Switch image" onClick="clickette();"> </td> <td class="propriete2" id="image2"></td> </tr> </table> </body>
on notera rapidement

une <div> vide et l'utilisation d'un <input type="Button" à la place d'une balise <button> ;
<table border="1"> est à remplacer par du CSS car la propriété border est obsoléte ;
l'attribut language est déprécié dans la balise <script language="Javascript">, autant écrire simplement <script >.

Merci pour tes remarques.
Tout à fait d'accord pour une <div> vide et l'utilisation d'un <input type="Button" à la place d'une balise <button> ;
et l'attribut language est déprécié dans la balise <script language="Javascript">, autant écrire simplement <script >.
Par contre, c'est encore dans le cours d'il y a 4 mois : "<table border="1">"
Il avait créé un tableau de 4 lignes en tapant : <table border="4">. Donc, je prends note que c'est obsolète mais je vais l'utiliser lors de l'examen,
je ne peux pas me permettre de le rater.
Merci

Citation:

Il avait créé un tableau de 4 lignes en tapant : <table border="4">.

:nono: il a créer une <table> dont l'épaisseur de la bordure est de 4px.