Système de notation et calcul moyenne

Version imprimable

09/05/2013, 22h15
Pelote2012

Système de notation et calcul moyenne

Bonjour,

J'ai trouvé ce post ici Pour faire un système de vote. Mais je n'ai pas trouvé de belles étoiles pour le faire.

Mon problème sur le choix de ces étoiles se pose car je souhaite aussi faire une moyenne des votes et là ... je peux avoir des étoiles de 2 couleurs ...
Je ne vois pas du tout comment faire.

Je travaille en ASP.NET/VB.NET

Pour les petites images ooublié j'ai récupéré une base sur un site et ça me va

J'ai fait une petite correction sur le script de vote

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
var done = false
var pic = new Array();
pic[0] = new Image();
pic[0].src = "/Images/star1.png";
pic[1] = new Image();
pic[1].src = "/Images/star2.png";
 
function rate(level) {
    if (done) { return false; }
    for (i = 1; i < 6; i++) {
        document.getElementById('_' + i).src = (level < i) ? pic[0].src : pic[1].src;
        document.getElementById('HiddenVote').value = level;
    }
}
 
function zero() {
    for (i = 1; i < 6; i++) {
        document.getElementById('_' + i).src = pic[0].src;
        done = false;
        document.getElementById('HiddenVote').value = "";
    }
}
 
function Clean() {
    if (done) { return false; }
    zero();
}
 
function valider() {
    done = true;
}

Code:

1
2
3
4
5
6
<img src="/Images/star1.png" id='_1' onclick="valider()" onmouseover="rate(1)" onmouseout="Clean()"/>
<img src="/Images/star1.png" id='_2' onclick="valider()" onmouseover="rate(2)" onmouseout="Clean()"/>
<img src="/Images/star1.png" id='_3' onclick="valider()" onmouseover="rate(3)" onmouseout="Clean()"/>
<img src="/Images/star1.png" id='_4' onclick="valider()" onmouseover="rate(4)" onmouseout="Clean()"/>
<img src="/Images/star1.png" id='_5' onclick="valider()" onmouseover="rate(5)" onmouseout="Clean()"/>(*) &nbsp;<input type="button" onclick="zero();" value="Corriger" id="btnreset"/>               
<input type="hidden" name="resultVote" id="HiddenVote" value="0" />

Mais par contre comment faire une fois qu'on a notre moyenne, pour afficher les bonnes images pour représenter cette moyenne.

Par exemple, disons moyenne = 3.2/5
Devrait m'afficher 3 X images pleine + 1 X image 0.2 + 1 X image vide

12/05/2013, 09h02
SpaceFrog

tu peux faire un système avec des étoiles transparentes et derrière un fond positionné qui ferait comme une jauge ...en positionnant l'image de fond colorée en pourcentage, tu verrais trois étoiles pleines, un remplie à 0.2 et la dernière vide.
13/05/2013, 08h28
Pelote2012

L'idée me plaît bien.

Mais j'ai du mal avec la mise en oeuvre. :oops:
Un div qui se colore ça devrait aller mais Comment faire pour trouver ses étoiles transparentes (je ne vois pas comment les faire moi même : entre le logiciel et la compétence)

Personnellement, j'étais en train de réfléchir sur un système se basant sur le système de vote. Je pars de 5 images dont je change la source. Mais mes essais ne me plaise pas
13/05/2013, 08h35
SpaceFrog

montre moi tes étoiles actuelles ... si y'a que ça je peux t'en faire des étoiles à fond transparent ..
15/05/2013, 17h29
Pelote2012

Désolé de n'avoir pas répondu tout de suite, j'ai été très très pris sur une panne

Pour l'étoile :? je fais comment pour la donner, il me faut une URL.
Tu connais un "hébergeur" gratuit pour mettre les images en ligne?
15/05/2013, 20h19
SpaceFrog

imageshack ?

sinon ici en pièce jointe ^^
16/05/2013, 20h08
Pelote2012

Merci, voici l'étoile

http://imageshack.us/scaled/thumb/15/rate0.png
17/05/2013, 08h22
SpaceFrog

mhhhh...
va me falloir la couleur du fond sur lequel sera placée l'image
19/05/2013, 11h20
Pelote2012

Bonjour,

La couleur de fond de mon site est : #FCF5E9
21/05/2013, 09h05
SpaceFrog

1 pièce(s) jointe(s)

Dans l'idée un truc comme ça ...

ensuite tu mets une image bicolore en arrière plan que tu déplaces horizontalement selon le pourcentage ...
21/05/2013, 09h33
Pelote2012

Merci je vais faire un essai.

Mais je pensais mettre les 5 étoiles transparentess dans un div.
Et avec un autre div de couleur passer derrière les étoiles.

Je ne comprends pas l'idée que tu me suggère de l'image bicolore:oops:
21/05/2013, 09h48
SpaceFrog

ben oui c'est le même principe que ton div ...
sauf que moi j'utilise une image bicolore avec un dégradé de façon à faire un jauge dégradée au lieu d'une coupure brutale, mais sinon le principe de base est exactement le même, c'est la position du div ou de l'image que donne le niveau ...
30/05/2013, 12h52
Pelote2012

J'ai réussi à faire un système automatisé avec des images différentes.
Faut que je passe plus de temps sur la version étoile transparente.