système notation par images

Marsh Posté le 16-03-2008 à 17:41:17

bonjour j'ai un formulaire pour poster un message sur mon livre d'or, avec des boutons radio pour sélectionner une note(de 1 à 5)
je souhaiterai faire en javacript le même systeme que windows media player ou itune pour selectionner la note.
j'ai pennsé à des bouton caché dont l'état serai modifier par un onclick sur une image d'étoile.

jespers que j'ai été clair, merci pour vos réponses!

thib

Reply

Marsh Posté le 16-03-2008 à 17:41:17

Reply

Marsh Posté le 17-03-2008 à 12:59:45

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

Reply

Marsh Posté le 23-03-2008 à 01:03:48

merci beacoup je vais tester, mais j'avous être un total ignorant en javascript ^^ et tu parle de dom mais qu'est-ce que c'est ???
merci

Reply

système notation par images

Sujets relatifs:

Leave a Replay