Discussion :

[csseur22]

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 :

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

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 :

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

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 :

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

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?

++

[lemok]

Bonjour,

Dans ton code HTML, deplace ta balise </fieldset> à la fin de ton tableau :

Code :

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

1
2
3
4
5
6
7
.
.
.

</tbody></table>
</fieldset>
<br> <br>

ça devrai marcher