changement d'image par radio boutton

Version imprimable

[RESOLU]changement d'image par radio boutton

Bonjour,

Je voudrais changer l'image selon que tel ou tel radio bouton soit cliqué

j'ai ceci comme code
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <script type="text/javascript" language="javascript"> function choix_couleur(radio_couleur) { for (var i=0; i<radio_couleur.length; i++) { if (radio_couleur[0].checked) { document.write('<img src="tshirt_r.jpg">');} if (radio_couleur[1].checked) { document.write('<img src="tshirt_v.jpg">');} if (radio_couleur[2].checked) { document.write('<img src="tshirt_j.jpg">');} if (radio_couleur[3].checked) { document.write('<img src="tshirt_b.jpg">');} if (radio_couleur[4].checked) { document.write('<img src="tshirt_o.jpg">');} } } </script>
Et voici le code dans le body
Code:

1 2 3 4 5 6 7 8 <input name="radio_couleur" type="radio" value="blanc">Blanc <input name="radio_couleur" type="radio" value="bleu">Bleu <input name="radio_couleur" type="radio" value="vert">Vert <input name="radio_couleur" type="radio" value="jaune">Jaune <input name="radio_couleur" type="radio" value="orange">Orange <br><br> <input name="boutton_ok" type="button" value="Tester" onclick="choix_couleur(radio_couleur)">
lorsque je clique sur le bouton il m'affiche bien l'image correspondante au numéro mais sur une autre page alors que je la veux sur la meme page

deplus il y a une erreur javascript : lorsque je clique sur le radio vert par ex il me met comme erreur "2.checked a la valeur null ou n'est pas un objet"

par contre lorsque je clique sur le dernier radio là il affiche tjs sur une autre page mais ne met pas d'erreur javascript

Si qqun peut m'aider

merci

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript" language="javascript">
var couleur=new Array("r","v","j","b","o")
 
function choix_couleur(radio_couleur)
{
for (var i=0; i<radio_couleur.length; i++) {
 if (radio_couleur[i].checked) {
document.getElementBYId('monimage').src="tshirt_"+couleur[i]+".jpg"
 }
}
}
</script>

Et voici le code dans le body

Code:

Code:

1
2
3
4
5
6
7
8
<input name="radio_couleur" type="radio" value="blanc">Blanc
<input name="radio_couleur" type="radio" value="bleu">Bleu
<input name="radio_couleur" type="radio" value="vert">Vert
<input name="radio_couleur" type="radio" value="jaune">Jaune
<input name="radio_couleur" type="radio" value="orange">Orange
<br><br>
<input name="boutton_ok" type="button" value="Tester" onclick="choix_couleur(radio_couleur)"> 
<img id="monimage" src="" />

14/03/2005, 15h56
Anonymous

Oui car il faut faire l'inverse,
Dans le <BODY mets une images avec un gif transparent
donne a ton image un name et id

<IMG id="truc" name="truc" src="vide.gif">

et dans ton script tu fait

if (radio_couleur[0].checked) { truc.src="tshirt_r.jpg";}

Encore plus simple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript" language="javascript">
 
 
function choix_couleur(radio_couleur)
{
for (var i=0; i<radio_couleur.length; i++) {
 if (radio_couleur[i].checked) {
alert("tshirt_"+radio_couleur[i].value.substr(0,1)+".jpg")
 }
}
}
</script>

14/03/2005, 16h11
ph_anrys

mais si je mets un alert je ne l'aurais pas dans ma page donc spacefrog, je pense que ta première solution sera mieux pour mon cas

En tous cas merci pour vos reponses
14/03/2005, 16h27
SpaceFrog

non l'alert c'est juste pour la vérification!!!

Code:

document.getElementBYId('monimage').src="tshirt_"+radio_couleur[i].value.substr(0,1)+".jpg";