[JavaScript] [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

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

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

01/06/2007, 07h49	#2
stunti Membre chevronné Inscription : mai 2006 Messages : 521 Détails du profil Informations personnelles : Âge : 33 Informations forums : Inscription : mai 2006 Messages : 521 Points : 602 Points : 602	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. __________________ If it's not broken, don't fix it. BiliBa Built on top of Zend Framework
	00

01/06/2007, 08h34	#3
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 119 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 119 Points : 45 278 Points : 45 278	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 __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

01/06/2007, 09h39	#4
stunti Membre chevronné Inscription : mai 2006 Messages : 521 Détails du profil Informations personnelles : Âge : 33 Informations forums : Inscription : mai 2006 Messages : 521 Points : 602 Points : 602	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 ;-) __________________ If it's not broken, don't fix it. BiliBa Built on top of Zend Framework
	00

01/06/2007, 10h24	#5
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 119 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 119 Points : 45 278 Points : 45 278	Toi tu surfes avec IE non ? moi je tapes 8 fois simultanément avec firefox à taquin... taquin et demi __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

03/06/2007, 02h13	#7
stunti Membre chevronné Inscription : mai 2006 Messages : 521 Détails du profil Informations personnelles : Âge : 33 Informations forums : Inscription : mai 2006 Messages : 521 Points : 602 Points : 602	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 __________________ If it's not broken, don't fix it. BiliBa Built on top of Zend Framework
	00

03/06/2007, 18h16	#8
FremyCompany Expert Confirmé Étudiant Inscription : février 2006 Messages : 2 532 Détails du profil Informations personnelles : Âge : 20 Informations professionnelles : Activité : Étudiant Informations forums : Inscription : février 2006 Messages : 2 532 Points : 2 903 Points : 2 903	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... __________________ Fremy Pour vos développements Web et une navigation agréable, le tout gratuit : 1) IE 8 + IE7Pro (Si vous ne connaissez pas IE7Pro, essayez !) 2) FF 3 + Web Developper Toolbar + AdBlockPlus + FireBug + GreaseMonkey
	00

04/06/2007, 03h05	#9
stunti Membre chevronné Inscription : mai 2006 Messages : 521 Détails du profil Informations personnelles : Âge : 33 Informations forums : Inscription : mai 2006 Messages : 521 Points : 602 Points : 602	IE7Pro augmente le nombre de connexions. http://wiki.ie7pro.com/index.php/IE7Pro_FAQ __________________ If it's not broken, don't fix it. BiliBa Built on top of Zend Framework
	00

04/06/2007, 08h35	#10
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 119 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 119 Points : 45 278 Points : 45 278	Merci pour ce troll sur le nombre de connections ... heu vous avez vu la taille des images ? __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

05/04/2009, 17h57	#11
mathieugut Membre éclairé Inscription : mars 2008 Messages : 216 Détails du profil Informations personnelles : Localisation : France, Gard (Languedoc Roussillon) Informations forums : Inscription : mars 2008 Messages : 216 Points : 394 Points : 394	Salut, Ou peux t'on se procurrer les images star1.gif et star2.gif de ton exemple ? Merci __________________ Bienvenue dans la matrice, attention à bien lire les règles... .::Mon espace perso developpez.com ::.
	00

21/04/2009, 19h38	#12
catycat Invité de passage Inscription : avril 2009 Messages : 1 Détails du profil Informations forums : Inscription : avril 2009 Messages : 1 Points : 1 Points : 1	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?
	00

29/09/2009, 21h11	#14
rams33 Invité de passage Inscription : septembre 2009 Messages : 3 Détails du profil Informations forums : Inscription : septembre 2009 Messages : 3 Points : 2 Points : 2	develloper Bonsoir pourrais tu développer pour récupérer la valeur du hidden car je cherche a la recup mais pas moyens
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email