décaler une <td> suite à un evenement
Bonjour,
j'ai un tableau avec trois lignes, dans la premiere j'ai un radio, la deuxieme une image en backround, la troixieme une autre image, la deuxieme ligne est cachée et sur le chek du boutton radio elle s'affiche, alors je voudrais que lorsque la deuxième colonne s'affiche, la troixième se décale un peu à gauche,
j'espère que j'ai pu être claire,
merci,
Voilà mon code javascript;
Code:
1
2
3
4
5
6
7
8
9
10
11
| <script type="text/javascript">
function visible(pag,bas)
{
if (document.getElementById(pag).className == "visible") {
document.getElementById(pag).className = "hidden";
} else {
document.getElementById(pag).className = "visible";
document.getElementById(bas).className = "pad";
}
}
</script> |
et le css:
Code:
1
2
3
4
5
6
7
8
9
10
11
| <style>
.pad{
padding:30px;
}
.visible{
display:block;
}
.hidden{
display:none;
}
</style> |
et voilà mon tableau:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| <table border="0" cellpadding="0" cellspacing="0">
<tr><td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:200px; height:200px; background: url(2.jpg) no-repeat;"><input type="radio" name="chek" value="oui" onclick="javascript:visible('pag');"><input type="radio" name="chek" value="non" checked="checked" onclick="javascript:visible('pag');">
</td>
</tr>
</table>
</td></tr>
<tr><td>
<div id="pag" class="hidden">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:200px; height:200px; background: url(3.jpg) no-repeat;">
</td>
</tr>
</table>
</div>
</td></tr>
<tr><td>
<table id="bas" border="0" cellpadding="0" cellspacing="0">
<tr id="bas">
<td id="bas" style="width:200px; height:200px; background: url(1.jpg) no-repeat;">
</td>
</tr>
</table>
</td></tr>
</table> |
Meri encore
je viens de mettre le deuxième paramettre
