[SRC] Vote Evaluation etoiles

**SpaceFrog** · 29/05/2007, 08h46

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

**stunti** · 01/06/2007, 07h49

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.

**SpaceFrog** · 01/06/2007, 08h34

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

**stunti** · 01/06/2007, 09h39

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 ;-)

**SpaceFrog** · 01/06/2007, 10h24

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

à taquin... taquin et demi

**FremyCompany** · 01/06/2007, 17h46

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

**stunti** · 03/06/2007, 02h13

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

**FremyCompany** · 03/06/2007, 18h16

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

**stunti** · 04/06/2007, 03h05

IE7Pro augmente le nombre de connexions.
http://wiki.ie7pro.com/index.php/IE7Pro_FAQ

**SpaceFrog** · 04/06/2007, 08h35

Merci pour ce troll sur le nombre de connections ...
heu vous avez vu la taille des images ?

**mathieugut** · 05/04/2009, 17h57

Salut,

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

Merci

**catycat** · 21/04/2009, 19h38

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

**SpaceFrog** · 22/04/2009, 09h23

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

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

Code :

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

**rams33** · 29/09/2009, 21h11

Bonsoir pourrais tu développer pour récupérer la valeur du hidden car je cherche a la recup mais pas moyens

**SpaceFrog** · 02/10/2009, 14h56

developper quoi ???

Code :

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

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

et coté serveur

Code :

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

1
2
  $_GET ou $_POST['HiddenVote']
ou $_REQUEST

**layache** · 26/07/2014, 01h15

oui spacefrog comment fais tu côté serveur pour récupérer les résultats ?

**Macom** · 06/10/2014, 17h04

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

[SRC] Vote Evaluation etoiles

Contribuez

Discussions similaires

Partager

Partager