Système de vote par étoile

**zbibounette** · 29/07/2008, 16h37

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

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

**SpaceFrog** · 29/07/2008, 18h12

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**zbibounette** · 29/07/2008, 18h18

merci je vais tester

**zbibounette** · 29/07/2008, 23h48

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

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

**SpaceFrog** · 30/07/2008, 10h24

le principe est le même ...

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 ...

**berni13** · 11/04/2022, 15h37

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 ?

Système de vote par étoile

JavaScript

Vue hybride

Discussions similaires

Partager

Partager