Pas la peine de t'embêter avec des boutons radios, avec javascript gere directement les clics sur les images des etoiles :
Code :
- <body>
- <form>
- ...
- <input type="hidden" name="note" id="note" value="" />
- ...
- </form>
- <img src="etoile1.jpg" alt="1/5" id="note1" onClick="document.getElementById("note" ).value = 1;" />
- ....
- <img src="etoile5.jpg" alt="5/5" id="note5" onClick="document.getElementById("note" ).value = 5;" />
- </body>
|
Bon là c'est tout moche avec le javascript qui traine dans le code html mais c'était juste pour montrer, reste plus qu'a faire ça bien propre avec le DOM.
Après pour faire ça joliment tu peux rajouter dans ta fonction (vu que tu auras fait ça bien propre avec le DOM ^^) le changement des images de façon à ce que quand on clic sur la troisieme etoile par exemple els etoiles de 1 a 3 deviennent jaune et les autres restent grises.
exemple(toujours par rapport au code html au dessus) :
Code :
- function change_note(id){
- for(i=0;i<5;i++){ // ici je recupere la valeur de la note en fonction de l'image qui a été cliquée
- if(id=="note"+(i+1)) var valeur = i+1;
- }
- document.getElementById("note" ).value = valeur; // ici la note est mise dans le champs caché du formulaire
- for(i=0;i<valeur;i++){
- //et là toutes les etoiles comprise entre 1 et celle cliquée sont changé apres pas compliqué de transformer un peu pour que les "etoilex_active.jpg" soient cliquables aussi pour pvoir rechanger avant envoi
- document.getElementById("note"+(i+1)).src= "etoile"+(i+1)+"_active.jpg";
- }
- }
|
Message édité par vanish le 17-03-2008 à 13:14:36
