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 : 1376
Taille : 5,2 Ko

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

Nom : image2.jpg
Affichages : 1359
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