Remplacement boutons radio par images
Hello,
voici mon script: http://shitinyurash.no-ip.org/index-javascript.php
Comme vous le voyez, j'ai remplacé les boutons radio par des images .. enfin presque. La première série contenant les noms de distributions Linux affiche encore le "radio", tandis que la deuxième série (choix entre type de pc) fonctionne parfaitement.
Deuxième problème, la première série de choix (les distros), gére mal les changements de choix: si je sélectionne une autre distro, la précédente sélectionnée doit laisser afficher la croix (il y a un seul choix possible entre les distros).
voici mon code javascript:
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
|
<script type="text/javascript">
/* <![CDATA[ */
function turnImgRadio1(objRadio)
{
var t_img = document.getElementById('distro').getElementsByTagName('img');
for (var i = 0; i < t_img.length; i++)
{
t_img[i].src = 'js/chk_off.png';
}
var img = document.getElementById('img_radio_' + objRadio.id);
img.src = 'js/chk_on.png';
}
function turnImgRadio2(objRadio)
{
var t_img = document.getElementById('architecture').getElementsByTagName('img');
for (var i = 0; i < t_img.length; i++)
{
t_img[i].src = 'js/chk_off.png';
}
var img = document.getElementById('img_radio_' + objRadio.id);
img.src = 'js/chk_on.png';
}
/* ]]> */
</script> |
mon code css:
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
29
30
31
32
33
|
<style type="text/css">
#architecture label, #distro label {
padding-right : 3px;
margin-right : 3px;
vertical-align : bottom;
}
#architecture p, #distro p {
position : relative;
float : left;
margin : 0;
}
#architecture input, #distro input {
opacity : 0; /* for !IE */
filter : alpha(opacity=0); /* for IE */
width : 20px;
height : 20px;
position : absolute;
right : 0;
top : 0;
}
.linuxgenerator-button {
color: #000000;
background-color: #DFE0C5;
font-size: 10px;
border: 2px solid #A34C00;
padding: 0px 2px 0px 2px;
}
.linuxgenerator-button:hover {
border: 2px solid #000000;
}
</style> |
et mon code html:
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
<table style="width: 300px;">
<form id="formulairetelechargement" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<tr><td>Téléchargez!</td></tr>
<fieldset id="distro">
<tr><td>
<p><label>
<img src="js/chk_on.png" id="img_radio_ubuntu" alt="Bouton radio" />
<input id="ubuntu" onclick="turnImgRadio1(this)" type="radio" checked="checked" name="distro" value="ubuntu"> <strong>Ubuntu</strong>
</label></p></td>
</tr>
<tr><td>
<p><label>
<img src="js/chk_off.png" id="img_radio_fedora" alt="Bouton radio" />
<input id="fedora" onclick="turnImgRadio1(this)" type="radio" name="distro" value="fedora"> <strong>Fedora</strong>
</label></p></td>
</tr>
<tr><td>
<p><label>
<img src="js/chk_off.png" id="img_radio_debian" alt="Bouton radio" />
<input id="debian" onclick="turnImgRadio1(this)" type="radio" name="distro" value="debian"> <strong>Debian</strong>
</label></p></td>
</tr>
<tr><td>
<p><label>
<img src="js/chk_off.png" id="img_radio_gentoo" alt="Bouton radio" />
<input id="gentoo" onclick="turnImgRadio1(this)" type="radio" name="distro" value="gentoo"> <strong>Gentoo</strong>
</label></p></td>
</tr>
</fieldset>
</table>
<br/> <br />
<fieldset id="architecture">
<p><label>
<img src="js/chk_on.png" id="img_radio_386" alt="Bouton radio" />
<input id="386" onclick="turnImgRadio2(this)" type="radio" checked="checked" value="i386" name="architecture" /><strong>PC standard</strong>
</label> ou</p><br />
<p><label>
<img src="js/chk_off.png" id="img_radio_64" alt="Bouton radio" />
<input id="64" onclick="turnImgRadio2(this)" type="radio" value="64" name="architecture" /><strong>PC 64 bits</strong>
</label> ?</p>
</fieldset>
</form>
</table> |
qu'es-ce qui beuggue pour la première série? :)
++
