Changer d'image dans un tableau

Bonjour,

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

Voici mon .js

Code:

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:

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:

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 !