notations par étoiles

Version imprimable

01/04/2008, 17h12
babafredo

notations par étoiles

Bonjour,
J'aimerais savoir s'il existe un script javascript qui permet un système de notation par étoiles , avec par exemple les étoiles qui s'allument au survol de la souris et n'avoir qu'une rangée d'étoiles. Lorsqu'on clique sur la 3ème par exemple, le système prend en considération la note 3 , comme sur amazon par exemple.
Je vois très bien comment faire ce genre de notation comme sur le site, mais autrement...
Quelqu'un pourrait-il m'aider??
Merci d'avance
01/04/2008, 17h14
SpaceFrog

code déja donné... merci de rechercher ..

http://www.developpez.net/forums/sho...d.php?t=346499
02/04/2008, 10h13
babafredo

Merci cela fonctionne très bien mais tu fais comment après pour le récupérer dans une base de données.
Merci d'avance.

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
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>StarRating</title>
<script type='text/javascript'>
var done=false
var Vote=0;
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" 
  Vote=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)" ;
	 Vote=0;
 	 }
	 }
 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"/>
<input type="button" onclick="alert(Vote);" value="Vote"/>
</body>
 
</html>

là la valeur du vote est dans la variabel Vote ...
tu peux la mettre dans un champs hidden d'un formulaire ...

02/04/2008, 11h17
babafredo
Je dois avouer que j'ai un peu du mal à basculer du javascript à l'asp.
Voilà j'ai essayé de passer ma variable dans un champ de type hidden mais elle me renvoie la valeur 0.
Code:

1 2 <input type="hidden" value="<%=vote%>" name="vote" id="vote"/>
puis je le récupère avec un request.form("vote").

Merci d'avance

Tu as un formulaire sur ta page ?

Par exemple ...

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
51
52
53
54
55
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>StarRating</title>
<script type='text/javascript'>
var done=false
var Vote=0;
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" 
  Vote=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)" ;
	 Vote=0;
 	 }
	 }
 function valider(){
 done=true;
 document.getElementById('vote').innerHTML+='   VALID&Eacute;'
 }
 
function ToForm(){
document.fomrs['myform'].elements['ValeurVote'].value=Vote
}
 
  </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="myform" action='page.asp' onsubmit="ToForm()">
<input type="hidden" name="ValeurVote" id="ValeurVote"/>
<input type="submit" value="Vote"/>
</form>
</body>
 
</html>

Voilà mon code pour ce qui est du formulaire:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
		<form action="note_add_cmt.asp?<% If Request("Id_SousCategorie") <> "" Then %>Id_SousCategorie=<%=Request("Id_SousCategorie")%>&<% End If %>Id_Banniere=<%=Request("Id_Banniere")%>&note=<%=Request("note")%>" method="post" name="myform" onsubmit="ToForm()">
		<input type="hidden" name="posted" value="1">
		        <tr>
            <td align="center">
                Clickez sur l'étoile de votre choix pour valider le vote:<br /><br />
 
                <img src="../images/starout.gif" id='_1' onclick="valider()" onmouseover="rate(1)" class="etoile"/>
                <img src="../images/starout.gif" id='_2' onclick="valider()"  onmouseover="rate(2)" class="etoile"/>
                <img src="../images/starout.gif" id='_3' onclick="valider()"  onmouseover="rate(3)" class="etoile"/>
                <img src="../images/starout.gif" id='_4' onclick="valider()"  onmouseover="rate(4)"  class="etoile"/>
                <img src="../images/starout.gif" id='_5' onclick="valider()"  onmouseover="rate(5)"  class="etoile"/>
                    <br /><br/>
                    <div id="vote">Votre vote : 0 étoile(s) </div>
                    <br /><br/>
                    <input type="hidden"  name="ValeurVote" id="ValeurVote"/>
                    <input type="button" onclick="zero();" value="reset"/>
                    <input type="button" onclick="alert(Vote);" value="Vote"/>
            </td>
        </tr>			    
	</table>
 
		<input type="submit" name="Noter" value="Noter" class="bouton"></form>

Et pour l'ajout de la note

Code:

1
2
3
4
 
	vote = request.Form ("vote")
	sqlcmt = "INSERT INTO Notes (Id_Banniere,Note,IP,Date_Note,txt_cmt,type,id_parent,vote) VALUES ('" & Request("Id_Banniere") & "','" & note_cmt & "','" & Session("IP") & "','" & Date() & "','" & commentaire & "',1,'"&request("note")&"', '" &vote& "')"
	Set rscmt = OBJdbConnection.Execute(sqlcmt)

Et là cela me renvoie toujours la valeur 0
Merci

02/04/2008, 13h27
SpaceFrog

Code:

name="ValeurVote"

:roll::roll::roll::roll::roll:

Code:

vote = request.Form ("ValeurVote")
02/04/2008, 14h28
babafredo

Désolée, pour l'erreur, des fois.....!!!!!!
Merci pour ton aide, je teste cela ...
03/04/2008, 09h06
babafredo

Merci cela marche parfaitement.:yaisse2: