Formulaire dans un tableau avec choix (radio)

Bonjour,
C'est tout à fait possible de mettre en œuvre ceci avec Javascript (c'est même assez simple tu vas voir).
Si je compte bien ( ) tu as 84 images normalement (pour chacune des 7 voitures il y a 4 couleurs, et pour chacune des 4 couleurs il y a 3 teintes de vitre donc 7*4*3=84).
Notons les chose ainsi:

Voiture 1: v1                      Couleur 1: c1                    Teinte 1: t1
Voiture 2: v2                      Couleur 2: c2                    Teinte 2: t2
Voiture 3: v3                      Couleur 3: c3                    Teinte 3: t3
Voiture 4: v4                      Couleur 4: c4
Voiture 5: v5
Voiture 6: v6
Voiture 7: v7

(Remplace "Voiture 1", "Couleur 3", "Teinte 2" par tes propres valeurs comme "Kangoo", "Rouge", "Foncé")

Tu peux donc nommer tes images selon la forme:

vx-cx-tx.jpg

Construisons un formulaire en html:

<form>
     <label for="v">Choisissez votre voiture</label>
     <select id="v">
          <option value="v1">Voiture 1</option>
          <option value="v2">Voiture 2</option>
          <option value="v3">Voiture 3</option>
          <option value="v4">Voiture 4</option>
          <option value="v5">Voiture 5</option>
          <option value="v6">Voiture 6</option>
          <option value="v7">Voiture 7</option>
     </select>
     <label for="c">Choisissez votre couleur</label>
     <select id="c">
          <option value="c1">Couleur 1</option>
          <option value="c2">Couleur 2</option>
          <option value="c3">Couleur 3</option>
          <option value="c4">Couleur 4</option>
     </select>
     <label for="t">Choisissez la teinte de vos vitres</label>
     <select id="t">
          <option value="t1">Teinte 1</option>
          <option value="t2">Teinte 2</option>
          <option value="t3">Teinte 3</option>
     </select>
</form>

Tu es d'accord qu'à présent, il suffirait de dire "charge moi l'image <select id="v">-<select id="c">-<select id="t">.jpg" ? Et bien Javascript sert à ça (sauf que la syntaxe que je viens de te montrer n'a aucun sens). Admettons que tu mette ton image ainsi en html:

<img id="img"/>

En Javascript tu créé la fonction "chargeImage":

function chargeImage() {
     var v=document.getElementById('v').value;
     var c=document.getElementById('c').value;
     var t=document.getElementById('t').value;
     document.getElementById('img').setAttribute('src','./images/'+v+'-'+c+'-'+t+'.jpg'); // En admettant que tes image soient dans le dossier "./images"
}

Il ne reste plus qu'à exécuter la fonction à chaque fois que la valeur des <select> est modifiée:

document.getElementById('v').onchange=chargeImage;
document.getElementById('c').onchange=chargeImage;
document.getElementById('t').onchange=chargeImage;

Voilà l'idée, à toi d'adapter.

Ok, n'hésite pas à poster si tu rencontre un problème

salut,
juste pour dire de ne pas laisser l'attribut "action" inexistant sur le <form> et que

<img id="img"/>

n'est pas correct. Il faut spécifier les attributs "src" et "alt". Pourquoi ne pas mettre une image blanche pour commencer ou carrément créer la balise dynamiquement lors du premier ajout.

Pour définir un "src" en JS on peut passer directement via "img.src" au lieu de "setAttribute".
Une autre manière de coder pourrait ressembler à ça

function addEvent(a,b,c,d){a.addEventListener?a.addEventListener(b,c,d||!1):a.attachEvent('on'+b,c);}

var sel = document.querySelectorAll("sel"),
	img = document.getElementById("img");

for (var i=0; i<3; i++) addEvent(sel[ i ], "change", function (){
	img.src = "dossier/" + sel[0].value +"-"+ sel[1].value +"-"+ sel[2].value +".jpg";
}, false);