[SRC] Vote Evaluation etoiles

Version imprimable

Voici un petit script developpé suite à une question sur le forum.
Il s'agit d'une petite animation pour enregistrer un vote de 1 à 5 étoiles.

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
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>StarRating</title>
<script type='text/javascript'>
var done=false
var pic = new Array();
pic[0]=new Image();
pic[0].src="star1.gif";
pic[1]=new Image();
pic[1].src="star2.gif";
var bareme = new Array("peu ","passablement ","moyennement","presque","") 
 
 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('vote').innerHTML="Votre vote : "+level+" étoile(s)   "+bareme[level-1]+" satisfaisant" 
  }
  }
  
 function zero(){
     for(i=1;i<6;i++){ document.getElementById('_'+i).src=pic[0].src;
     done=false;
     document.getElementById('vote').innerHTML="Votre vote : 0 étoile(s)" 
 
     }
     }
 function valider(){
 done=true;
 document.getElementById('vote').innerHTML+='   VALID&Eacute;'
 }
      
  </script>
</head>
 
<body>
Clickez sur l'étoile de votre choix pour valider le vote:<br /><br />
<img src="star1.gif" id='_1' onclick="valider()" onmouseover="rate(1)" /><img src="star1.gif" id='_2' onclick="valider()"  onmouseover="rate(2)" /><img src="star1.gif" id='_3' onclick="valider()"  onmouseover="rate(3)" /><img src="star1.gif" id='_4' onclick="valider()"  onmouseover="rate(4)"  /><img src="star1.gif" id='_5' onclick="valider()"  onmouseover="rate(5)"  />
<br /><br/>
<div id="vote">Votre vote : 0 étoile(s) </div><br /><br/>
<input type="button" onclick="zero();" value="reset"/>
</body>
 
</html>

01/06/2007, 07h49
stunti

Amelioration.
Au lieu d'utiliser 2 images, pourquoi ne pas en utiliser une qui contient les 2 etoiles l'unse sous l'autre et utiliser le positionnement du background de l'image pour afficher l'etoile choisie?
Cela permet d'eviter une connexion supplementaire au serveur.
01/06/2007, 08h34
SpaceFrog

Bof les images sont super légères et preloadées ...
et puis le background position je ne sais pas si c'est très crossbrowser ... ni le clip d'ailleurs...

Mais c'est en effet une possibilité... une amélioration je ne sais pas
01/06/2007, 09h39
stunti

Le background position est cross browser.
L'interet n'est pas tant le gain de poids que de la monopolisation d'une connexion vers un serveur alors que les navigateurs n'en autorise que deux simultanees.

Mais c'est plus du taquinage la ;-)
01/06/2007, 10h24
SpaceFrog

Toi tu surfes avec IE non ?
moi je tapes 8 fois simultanément avec firefox

à taquin... taquin et demi ;)
01/06/2007, 17h46
FremyCompany

Citation:

Envoyé par SpaceFrog

Toi tu surfes avec IE non ?
moi je tapes 8 fois simultanément avec firefox

à taquin... taquin et demi ;)

IE aussi gère plus que 2 connections par serveur, 2 c'est le nombre de connections AJAX simultanées par serveur ;)
03/06/2007, 02h13
stunti

Pas du tout

IE, comme les autres respecte, cette convention.
Que ce soit en AJAX ou autre, as plus de 2 connexions simultanee vers un meme serveur.
d'ou l'utilite de mt*. pour les images de google maps par example.
Cela permet de depasse cette limitation en redirigeant toutes les demandes vers un seul serveur (ultra facile a faire avec lighttpd qui est souvent utiliser pour ce genre d'application car il gere tres bien un grand nombre de requetes simultanees)

http://support.microsoft.com/kb/183110
http://support.microsoft.com/kb/282402/en-us
03/06/2007, 18h16
FremyCompany

Tiens, pourtant chez moi j'avais 6 connections par serveur dans mes paramètres IE7Pro dès le début... Est-ce parcequ'il a changé l'option tout seul lorsqu'il s'est installé ? mistère...
04/06/2007, 03h05
stunti

IE7Pro augmente le nombre de connexions.
http://wiki.ie7pro.com/index.php/IE7Pro_FAQ
04/06/2007, 08h35
SpaceFrog

Merci pour ce troll sur le nombre de connections ...
heu vous avez vu la taille des images ? :aie:
05/04/2009, 17h57
mathieugut

Salut,

Ou peux t'on se procurrer les images star1.gif et star2.gif de ton exemple ?

Merci :)
21/04/2009, 19h38
catycat

adaptation

Bravo pour le script mais comment adapter le code pour envoyer la note dans une base de données afin de faire une moyenne?

pas très compliqué il suffit de rajouter un champs hidden et de mettre la valeur du level dedans :roll:

ça pourrait donner un truc comme ça avec vote immédiat ..

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
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>StarRating</title>
<script type='text/javascript'>
var done=false
var pic = new Array();
pic[0]=new Image();
pic[0].src="star1.gif";
pic[1]=new Image();
pic[1].src="star2.gif";
var bareme = new Array("peu ","passablement ","moyennement","presque","") 
 
 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('vote').innerHTML="Votre vote : "+level+" étoile(s)   "+bareme[level-1]+" satisfaisant" 
  document.getElementById('HiddenVote').value=level;
  }
  }
 
 function zero(){
     for(i=1;i<6;i++){ document.getElementById('_'+i).src=pic[0].src;
     done=false;
     document.getElementById('vote').innerHTML="Votre vote : 0 étoile(s)" 
 
     }
     }
 function valider(){
 done=true;
 document.getElementById('vote').innerHTML+='   VALID&Eacute;'
 document.forms[0].submit()
 }
 
  </script>
</head>
 
<body>
Clickez sur l'étoile de votre choix pour valider le vote:<br /><br />
<img src="star1.gif" id='_1' onclick="valider()" onmouseover="rate(1)" /><img src="star1.gif" id='_2' onclick="valider()"  onmouseover="rate(2)" /><img src="star1.gif" id='_3' onclick="valider()"  onmouseover="rate(3)" /><img src="star1.gif" id='_4' onclick="valider()"  onmouseover="rate(4)"  /><img src="star1.gif" id='_5' onclick="valider()"  onmouseover="rate(5)"  />
<br /><br/>
<div id="vote">Votre vote : 0 étoile(s) </div><br /><br/>
<input type="button" onclick="zero();" value="reset"/>
<form name="formvote" action="pageaction.php">
<input type="hidden" name="resultVote" id="HIddenVote" value="0"/>
</form>
</body>
 
</html>

on pourrait aussi faire un send en ajax ...
Bref avec un tout petit peu d'imagination il y a plein de possibilités

29/09/2009, 21h11
rams33

develloper

Bonsoir pourrais tu développer pour récupérer la valeur du hidden car je cherche a la recup mais pas moyens :roll:
02/10/2009, 14h56
SpaceFrog
developper quoi ???

Code:

document.getElementById('HiddenVote').value=level;

et coté serveur
Code:

1 2 $_GET ou $_POST['HiddenVote'] ou $_REQUEST
26/07/2014, 01h15
layache

oui spacefrog comment fais tu côté serveur pour récupérer les résultats ?
06/10/2014, 17h04
Macom

Multiple votes...

Salut SpaceFrog,
voilà qui est super intéressant et qui fonctionne nickel. J'ai besoin de mettre en place ceci pour 4 questions différentes, sur la même page...

Je débute un peu (dans le code) et je ne vois pas si cela est possible, car là si on met ce code X fois, il prends en compte la première réponse uniquement...
Espérant me faire comprendre :)

Merci.
Macom