Discussion :

[lavm01]

Bonjour,

Comment changer d'image dans un tableau, voir le code:

Voici mon .js

Code :

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

1
2
3
4
5
6
7
function aff_tab1(id){
   var i=0, el;
   while(el = document.getElementById(id+"_"+i)){
    el.className = (el.className=="hide1") ? "show1" : "hide1";
    i++;
   }
}

voici mon .css

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.cur {
 cursor: pointer;
}
.hide1 {
 display:none;
}
.show1 {
 display: ;
 background-color: #FFF;
}
.show1:hover {
 /*display: ;*/
 background-color: #FFF;
}

Voici mon .html

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
 <td width="100%" height="22px" onclick="aff_tab1('tdblocs_2');" class="cur"><img style="vertical-align:middle;" src="contenu/images/pluscl.png">&nbsp;&nbsp;LISTE DE TOUS LES FINALISTES (cliquez ici)</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr id="tdblocs_2_0" class="hide1" style="font-weight: bold;">
 <td align="left">
  <table border="0" cellpadding="0" cellspacing="1" width="100%" BGCOLOR="black">
    <tr class="hauteur" BGCOLOR="white">
................

L'image du premier tableau est un PLUS, quand je clique dessus les autres tableaux se "déplier/replier" mais j'aimerais bien changer l'image et mettre un moins selon le cas "plier ou déplier".

Merci !

[VynkaVynka]

Bonjour,

je te conseille de regarder du côté du framework jQuery pour faire cela. En JavaScript pur, c'est très simple aussi de le faire, mais en utilisant jQuery tu pourras faire plus, plus simplement et en moins de lignes de code.
Parenthèse mise à part : une affectation dans un while n'est pas très prudent.
Sinon, pour la solution en JS simple :

Code :

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

1
2
3
//Donne un id, ici "id_img" à ton image
document.getElementById("id_img").setAttribute("src","chemin_vers_moins.png"); //Si tu veux l'image moins
document.getElementById("id_img").setAttribute("src","chemin_vers_plus.png"); //Si tu veux remettre l'image plus