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