Système de notation

Bonjour,

Etant une bille en javascript et n'ayant pas trop le temps pour l'instant d'apprendre ce language je viens vous faire part de mon problème si jamais il y a un expert en js qui peut prendre un peu de son temp pour m'aiguiller!

J'ai recupéré un systeme de notation allant de 1 a 5 étoiles de couleur grise et quand le curseur passe sur une étoile ou qu' on en selectionne une, elle devient jaune ainsi que toutes les étoiles precedentes.Si la personne à déja mis une note, il peut la modifier, mon problème: j'aimerais que la note qu'il ai donné soit visible au niveau des étoiles, je m'explique si l'utilisateur a mis une note de 3 j'aimerais que les 3 premières étoiles sois déja en jaune:
j'ai essayé avec checked='checked', ca fonctionne mais le problème c'est qu'il faut survoler les étoiles avec le curseur avant pour voir l'étoiles/la note sélectionnée,si quelqu'un a une idée a me suggérer, je suis preneur, ou déja me dire si c'est possible ou pas!

Je vous mets mon code:

le formulaire:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<form action="" method="post">
 <ul class="notes-echelle">
   <li>
    <label for="note01" title="Note: 1 sur 5">1</label>
    <input type="radio" name="notesA" id="note01" value="1" />
   </li>
   <li>
    <label for="note02" title="Note: 2 sur 5">2</label>
    <input type="radio" name="notesA" id="note02" value="2" />
   </li>
   <li>
    <label for="note03" title="Note: 3 sur 5">3</label>
    <input type="radio" name="notesA" id="note03" value="3"  checked='checked' />
   </li>
   <li>
    <label for="note04" title="Note: 4 sur 5">4</label>
    <input type="radio" name="notesA" id="note04" value="4"/>
   </li>
   <li>
    <label for="note05" title="Note: 5 sur 5">5</label>
    <input type="radio" name="notesA" id="note05" value="5" />
   </li>
 </ul>									
 <input class="bouton_envoyer" type="submit" name="Envoyer_note" value="envoyer" />
</form>

Le code js:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
// Lorsque le DOM est chargé on applique le Javascript
$(document).ready(function() 
{
	// On ajoute la classe "js" à la liste pour mettre en place par la suite du code CSS uniquement dans le cas où le Javascript est activé
	$("ul.notes-echelle").addClass("js");
	// On passe chaque note à l'état grisé par défaut
	$("ul.notes-echelle li").addClass("note-off");
	// Au survol de chaque note à la souris
	$("ul.notes-echelle li").mouseover(function() {
		// On passe les notes supérieures à l'état inactif (par défaut)
		$(this).nextAll("li").addClass("note-off");
		// On passe les notes inférieures à l'état actif
		$(this).prevAll("li").removeClass("note-off");
		// On passe la note survolée à l'état actif (par défaut)
		$(this).removeClass("note-off");
	});
	// Lorsque l'on sort du sytème de notation à la souris
	$("ul.notes-echelle").mouseout(function() {
		// On passe toutes les notes à l'état inactif
		$(this).children("li").addClass("note-off");
		// On simule (trigger) un mouseover sur la note cochée s'il y a lieu
		$(this).find("li input:checked").parent("li").trigger("mouseover");
	});
});
 
$("ul.notes-echelle input")
	// Lorsque le focus est sur un bouton radio
	.focus(function() {
		// On passe les notes supérieures à l'état inactif (par défaut)
		$(this).parent("li").nextAll("li").addClass("note-off");
		// On passe les notes inférieures à l'état actif
		$(this).parent("li").prevAll("li").removeClass("note-off");
		// On passe la note du focus à l'état actif (par défaut)
		$(this).parent("li").removeClass("note-off");
	})
	// Lorsque l'on sort du sytème de notation au clavier
	.blur(function() {
		// Si il n'y a pas de case cochée
		if($(this).parents("ul.notes-echelle").find("li input:checked").length == 0) {
			// On passe toutes les notes à l'état inactif
			$(this).parents("ul.notes-echelle").find("li").addClass("note-off");
		}
	});
 
$("ul.notes-echelle input")
	// Lorsque le focus est sur un bouton radio
	.focus(function() {
		// On supprime les classes de focus
		$(this).parents("ul.notes-echelle").find("li").removeClass("note-focus");
		// On applique la classe de focus sur l'item tabulé
		$(this).parent("li").addClass("note-focus");
		// [...] cf. code précédent
	})
	// Lorsque l'on sort du sytème de notation au clavier
	.blur(function() {
		// On supprime les classes de focus
		$(this).parents("ul.notes-echelle").find("li").removeClass("note-focus");
		// [...] cf. code précédent
	})
	// Lorsque la note est cochée
	.click(function() {
		// On supprime les classes de note cochée
		$(this).parents("ul.notes-echelle").find("li").removeClass("note-checked");
		// On applique la classe de note cochée sur l'item choisi
		$(this).parent("li").addClass("note-checked");
	});
 
// On simule un survol souris des boutons cochés par défaut
$("ul.notes-echelle input:checked").parent("li").trigger("mouseover");
// On simule un click souris des boutons cochés
$("ul.notes-echelle input:checked").trigger("click");

http://www.developpez.net/forums/d34...ation-etoiles/

Merci pour ta réponse plus que rapide :ccool:

Mais j'aimerais garder le script que j'ai si possible..
oui je suis chiant! :oops:
Si ce n' est pas possible de faire se que je veux avec mon code je prendrais celui vers lequel tu m' as envoyé!

Personne ne sait si c'est possible ? Si ca ne l'ai pas je perdrais pas de temps avec ce script!

Bonsoir

Sans le code complet, CSS et les images, je ne peux rien tester.