notations par étoiles

**babafredo** · 01/04/2008, 17h12

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

**SpaceFrog** · 01/04/2008, 17h14

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

http://www.developpez.net/forums/sho...d.php?t=346499

**babafredo** · 02/04/2008, 10h13

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.

**SpaceFrog** · 02/04/2008, 10h21

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

**babafredo** · 02/04/2008, 11h17

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 :

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

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

**SpaceFrog** · 02/04/2008, 11h32

Tu as un formulaire sur ta page ?

Par exemple ...

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

**babafredo** · 02/04/2008, 12h10

Voilà mon code pour ce qui est du formulaire:

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

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

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)