Intervertir deux images

**Zorro en pyjama** · 04/09/2016, 12h38

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'avanceInversion images.html Nom : image1.jpg
Affichages : 1291
Taille : 5,2 Ko

Nom : image1.jpg
Affichages : 1291
Taille : 5,2 Ko

Nom : image2.jpg
Affichages : 1275
Taille : 10,8 Ko

**eleydet** · 04/09/2016, 14h10

Cette solution, peut-être?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**NoSmoking** · 04/09/2016, 14h19

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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> ?

**Zorro en pyjama** · 04/09/2016, 15h34

Ç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

**Zorro en pyjama** · 04/09/2016, 15h48

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.

**NoSmoking** · 06/09/2016, 15h09

Dans ta nouvelle mouture HTML à savoir

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Zorro en pyjama** · 06/09/2016, 19h14

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

**NoSmoking** · 11/09/2016, 11h21

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

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

Intervertir deux images

JavaScript

Discussions similaires

Partager

Partager