changement d'image par radio boutton

**ph_anrys** · 14/03/2005, 15h48

Bonjour,

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

j'ai ceci comme code

Code :

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

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 :

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

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

**SpaceFrog** · 14/03/2005, 15h53

Code :

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

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 :

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

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="" />

**Anonymous** · 14/03/2005, 15h56

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";}

**SpaceFrog** · 14/03/2005, 15h58

Encore plus simple :

Code :

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

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>

**ph_anrys** · 14/03/2005, 16h11

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

**SpaceFrog** · 14/03/2005, 16h27

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

Code :

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

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

changement d'image par radio boutton

JavaScript

Discussions similaires

Partager

Partager