Système de vote par étoile

Bonjour,

je cherche un système de vote avec étoiles comme celui de http://ajax.nouvelle-bulle.com/boite...le-avec-jquery
Je cherche à afficher le résultat comme le lien ci dessus.

J'ai testé plusieurs scripts comme celui de http://www.masugadesign.com/the-lab/...ating-bar/P60/ mais ce dernier bug énormément avec la base de donnée :cry:
j'ai essayé aussi celui ci http://php.scripts.psu.edu/rja171/widgets/rating.php mais il n'affiche pas les résultats directement sous forme d'étoiles comme le lien de la bulle ajax.

Je n'ai testé pour l'instant que des scripts avec jQuery (car j'ai déjà un script jquery dans la page), j'ai peur que ça bug avec mootols :?

Merci :yaisse2:

2 pièce(s) jointe(s)

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
<script>
function fillstar(Obj){
var stars=document.getElementsByName(Obj.name)
 
for(i=0;i<stars.length;i++){
 
        if (i<=Obj.id){stars[i].src="fullstar.jpg"}
        else{stars[i].src="emptystar.jpg"}
}
}
</script>
<style type='text/css'>
img {height:30px;width:30px;}
</style>
</head>
 
<body>
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="star" id="0" onmouseover="fillstar(this)" />
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="star" id="1" onmouseover="fillstar(this)" />
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="star" id="2" onmouseover="fillstar(this)" />
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="star" id="3" onmouseover="fillstar(this)" />
<img style="cursor:pointer;" src="emptystar.jpg" name="star"  id="4"  onmouseover="fillstar(this)" />
<br/><br/>
 
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="1star" id="0" onmouseover="fillstar(this)" />
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="1star" id="1" onmouseover="fillstar(this)" />
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="1star" id="2" onmouseover="fillstar(this)" />
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="1star" id="3" onmouseover="fillstar(this)" />
<img style="cursor:pointer;" src="emptystar.jpg" name="1star"  id="4"  onmouseover="fillstar(this)" />
<br/><br/>
 
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="2star" id="0" onmouseover="fillstar(this)" />
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="2star" id="1" onmouseover="fillstar(this)" />
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="2star" id="2" onmouseover="fillstar(this)" />
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="2star" id="3" onmouseover="fillstar(this)" />
<img style="cursor:pointer;" src="emptystar.jpg" name="2star"  id="4"  onmouseover="fillstar(this)" />
<br/><br/>
 
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="3star" id="0" onmouseover="fillstar(this)" />
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="3star" id="1" onmouseover="fillstar(this)" />
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="3star" id="2" onmouseover="fillstar(this)" />
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="3star" id="3" onmouseover="fillstar(this)" />
<img style="cursor:pointer;" src="emptystar.jpg" name="3star"  id="4"  onmouseover="fillstar(this)" />
<br/><br/>
 
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="4star" id="0" onmouseover="fillstar(this)" />
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="4star" id="1" onmouseover="fillstar(this)" />
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="4star" id="2" onmouseover="fillstar(this)" />
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="4star" id="3" onmouseover="fillstar(this)" />
<img style="cursor:pointer;" src="emptystar.jpg" name="4star"  id="4"  onmouseover="fillstar(this)" />
<br/><br/>
 
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="5star" id="0" onmouseover="fillstar(this)" />
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="5star" id="1" onmouseover="fillstar(this)" />
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="5star" id="2" onmouseover="fillstar(this)" />
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="5star" id="3" onmouseover="fillstar(this)" />
<img style="cursor:pointer;" src="emptystar.jpg" name="5star"  id="4"  onmouseover="fillstar(this)" />
<br/>
 
 
</body>
</html>

avec une image d'étoile pleine et une d'étoile vide

merci je vais tester :yaisse2:

ça marche mais ce n'est pas l'effet que je cherche à obtenir :cry:

je recherche le même résultat que ce script mootools qui relie le script à la une BDD et permet d'afficher constemment les résultats sour forme de coeurs http://widgets.rabidlabs.net/ratings/v1.4/

Mais comme j'utilise déjà jQuery dans la page j'ai peur qu'il y ait des conflits entres les deux librairies :(:(:(:(

Merci et désolée pour le dérangement :oops:

le principe est le même ... 8O

y'a juste à modifier un peu
peut être au lieu du mouseover utiliser une autre source pour le changement d'image ... mais le principe de base est là ...

quoi que là ça m'a l'air encore plus simple...
il y a un gif avec les coeur donc le centre est transparent, et en arrière plan un div de couleur qui s'allonge ...

Bonjour, j'ai trouvé avec ce code le moyen de faire ce que je voulais merci, il ne me manque qu'une chose comment enregistrer les résultats ?