Discussion :

[Pelote2012]

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

[Pelote2012]

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 javascript :

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
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 html :

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

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

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

[Pelote2012]

L'idée me plaît bien.

Mais j'ai du mal avec la mise en oeuvre.
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

[SpaceFrog]

montre moi tes étoiles actuelles ... si y'a que ça je peux t'en faire des étoiles à fond transparent ..

[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?

[SpaceFrog]

imageshack ?

sinon ici en pièce jointe ^^

[Pelote2012]

Merci, voici l'étoile

[SpaceFrog]

mhhhh...
va me falloir la couleur du fond sur lequel sera placée l'image

[Pelote2012]

Bonjour,

La couleur de fond de mon site est : #FCF5E9

[SpaceFrog]

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

[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

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

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