2 Questions à propos d'un script

Version imprimable

Salut,
J'ai le script de l'évaluation par étoiles suivants... Mais j'ai quelques questions a laquelles j'espère bien trouvé une réponse içi.....
Voiçi le script:

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
 
<head>
<LINK rel="stylesheet" type="text/css" href="styles.css"/>
<script>
var n = 5;
function init(){
	var html = '';
	for (i=0; i<n; i++){
		id = i+1;
		html += '<a href="#"><img src="starOut.png" ';
		html += 'id="star" value="off" ';
		html += 'onMouseOver="over('+id+');" ';
		html += 'onMouseOut="out('+id+');" ';
		html += 'onClick="on('+id+')"/></a>'
	}
	document.getElementById("classement").innerHTML = html;
}
 
function over(nb){
	elemClassement = document.getElementById("classement");
	tabImg = elemClassement.getElementsByTagName("img");
 
	if (nb > 0)
		for (i=0; i<nb; i++)
			tabImg[i].src="starOver.png";
	for (i=nb; i<n; i++)
		tabImg[i].src="starOut.png";
}
 
function out(nb){
	elemClassement = document.getElementById("classement");
	tabImg = elemClassement.getElementsByTagName("img");
 
	for (i=0; i<nb; i++)
		tabImg[i].src="starOut.png";
	for (i=0; i<n; i++){
		if (tabImg[i].value == "on")
			tabImg[i].src="starOn.png";
	}
}
 
function on(nb){
	elemClassement = document.getElementById("classement");
	tabImg = elemClassement.getElementsByTagName("img");
 
	for (i=0; i<nb; i++){
		tabImg[i].src="starOn.png";
		tabImg[i].value="on";
	}
	for (i=nb; i<n; i++){
		tabImg[i].src="starOut.png";
		tabImg[i].value="off";
	}
 
	elemComment = document.getElementById("commentaire");
 
   switch(nb){
   		case 1:
		 text="Médiocre";
		 break;
 
		 case 2:
		 text="Mauvais";
		 break;
 
		 case 3:
		 text="Moyen";
		 break;
 
		 case 4:
		 text="Bon";
		 break;
 
		 case 5:
		 text="Excellent";
		 break;
 
		 default:
		 text="";
 
		}	  
	//text = nb+" étoiles";
	elemComment.innerHTML = text;
}
</script>
</head>
 
<body>
	<div id="classement" name="cls">
		<script>init();</script>
	</div><br>
	<div id="commentaire"></div>
</body>

1- J'ai mis ce script entre un <td>et</td> dans un tableau, mais les étoiles s'affichent en haut de la cellule, j'ai pas su comment les mettre en centre.

2-Comment editer la police et la taille de la police du commentaire(c'est à dire du médiocre, mauvais....)
:roll:

En attendant votre réponse et votre aide précieuse, veuillez acceptez mes salutations. ;)

22/03/2008, 09h51
Jumano
Citation:

Envoyé par L'aigle de Carthage

1- J'ai mis ce script entre un <td>et</td> dans un tableau, mais les étoiles s'affichent en haut de la cellule, j'ai pas su comment les mettre en centre.
Code:

1 2 <td valign="middle">
Mais cest plus du CSS que du javascript ...

Idem pour ta question 2, il faut créer tes différents styles dans ton fichier styles.css, et ensuite :
Code:

1 2 <div id="commentaire" class="laclassquetuasdefini" >
22/03/2008, 10h30
L'aigle de Carthage

9a n'as pas marché :(
22/03/2008, 10h35
Jumano

Citation:

Envoyé par L'aigle de Carthage

9a n'as pas marché :(

Qu'est ce qui n'a pas marché ?
22/03/2008, 10h42
htr999

1 pièce(s) jointe(s)

voici une nouvelle version que j'ai modifiée.

suite de ce POST abandonné !.!

;)

Merci beaucoup, ton nouveau script est parfait!!! :king:

Une dernière question , j'ai fait ce code la :

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
 
<?php 
 
include("connexionbd.php");
require_once("evaluation.class.php");
 
 
$log=$_SESSION['logss'];
$clt=$_SESSION['idclient'];
$prd=$_GET["produit"];
$nom=$_GET["nom"];
 
        /// Instanciation       
                $eva = new evaluation($page,'where code_client=\''.$clt.'\'');
                                
        echo '<table border="1">';
        echo '<caption><font size="1" face="Verdana" color="#041f2e"><b>Evaluation du '.$nom.' </b></font></caption>'; ?>
 
			<? while(!$eva->eof){
 
				$req=mysql_query("select Critere from critere where id='".$eva->id_critere."'"); 
 
			 while($res=mysql_fetch_array($req)){ 
			?>
	<tr>
      		 <td>
    			<? echo '<font size="2" face="Verdana" color="#041f2e">'.$res['Critere'].'</font>' ; ?>   
     		 </td>
 
      		<td valign="middle">
    			<? include("index.html") ; ?>   
      		</td>
	</tr>
 
<? }
$eva->Movenext();
}
echo '</table>';
?>

Mais le problème içi, c'est que la ligne des 5 étoiles ne s'affichent que dans la première ligne du tableau....
voiçi une image du résultat:
http://rapidshare.com/files/101434947/tab.jpg.html

à la 1ere vue, je pense que ça ne ferait pas l'affaire d'utiliser l'insertion de index.html
Code:

1 2 3 <td valign="middle"> <? include("index.html") ; ?> </td>
le mieux c'est que tu fasse un appel au script init(); comme a fait index.html
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 compteurCom = 0; ... <td valign="middle"> <? compteurCom++; echo '<table border=0> <tr> <td> <div id="classement'.$compteurCom.'" name="cls"> <script>init();</script> </div> </td> <td> <div id="commentaire'.$compteurCom.'"></div> </td> </table>' ?> </td>
la récupération de chaque éval va se faire avec une liste de variables NB appropriées. (tableau de NB par exemple que tu le donne à chaque init(); ?.? )
il faut de la manip !.! :aie::aie::aie:

a+

22/03/2008, 11h48
htr999

1 pièce(s) jointe(s)

voici une nouvelle version, la récupération des éval se fait dans compter()
tu peux l'adapter à ton code coté PHP !.!

a+
22/03/2008, 12h21
L'aigle de Carthage

:king: Tu es un SuperUltraExper du javascript :king:
Mais j'ai une petite question:
J'utilise une boucle pour affciher les différentes critères de ma base de données (MySQL) par l'intermédiaire de ----<? while(!$eva->eof){ ---,
donc comment je peut faire pour faire incrémenter le compteur de init(i) et avoir le résultat parfait?
22/03/2008, 12h27
htr999

comme cité plus haut, tu fait avec un compteurCom et appelle le script avec init($compteurCom), pour l'ID du commentaire, id='commentaire'.$compteurCom.'
...

a+

ça n'as pas marché :(

J'ai fait le script suivant

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
 
<?php
session_start(); 
$idsession=session_id();
?>
 
<head>
<LINK rel="stylesheet" type="text/css" href="styles.css"/>
<script>
var n = 5;
function init(numero){
	var html = '';
	for (i=0; i<n; i++){
		id = i+1;
		html += '<a href="#"><img src="starOut.png" ';
		html += 'id="star" value="off" ';
		html += 'onMouseOver="over('+id+','+numero+');" ';
		html += 'onMouseOut="out('+id+','+numero+');" ';
		html += 'onClick="on('+id+','+numero+')"/></a>'
	}
	textNum = "classement"+numero;
	document.getElementById(textNum).innerHTML = html;
}
 
function over(nb, numero){
	textNum = "classement"+numero;
	elemClassement = document.getElementById(textNum);
	tabImg = elemClassement.getElementsByTagName("img");
 
	if (nb > 0)
		for (i=0; i<nb; i++)
			tabImg[i].src="starOver.png";
	for (i=nb; i<n; i++)
		tabImg[i].src="starOut.png";
}
 
function out(nb, numero){
	textNum = "classement"+numero;
	elemClassement = document.getElementById(textNum);
	tabImg = elemClassement.getElementsByTagName("img");
 
	for (i=0; i<nb; i++)
		tabImg[i].src="starOut.png";
	for (i=0; i<n; i++){
		if (tabImg[i].value == "on")
			tabImg[i].src="starOn.png";
	}
}
 
function on(nb, numero){
	textNum = "classement"+numero;
	elemClassement = document.getElementById(textNum);
	tabImg = elemClassement.getElementsByTagName("img");
 
	for (i=0; i<nb; i++){
		tabImg[i].src="starOn.png";
		tabImg[i].value="on";
	}
	for (i=nb; i<n; i++){
		tabImg[i].src="starOut.png";
		tabImg[i].value="off";
	}
 
	textNum = "commentaire"+numero;
	elemComment = document.getElementById(textNum);
 
   switch(nb){
   		case 1:	text="Médiocre";	break;
		case 2:	text="Mauvais"; 	break;
		case 3: text="Moyen";		break;
		case 4:	text="Bon";			break;
		case 5:	text="Excellent";	break;
		default:text="";
	}	  
	//text = nb+" étoiles";
	elemComment.innerHTML = text;
}
 
function compter(){
	tabCom = document.getElementsByName("commentaire");
	for (i=0; i< tabCom.length; i++){
		if (tabCom[i].firstChild != null){
			//alert(tabCom[0].firstChild.nodeValue);
			switch (tabCom[i].firstChild.nodeValue){
				case "Médiocre"	:  alert("1");	break;
				case "Mauvais"	:  alert("2");	break;
				case "Moyen"	:  alert("3");	break;
				case "Bon"		:  alert("4");	break;
				case "Excellent":  alert("5");	break;
				default:;
			}
		}
		else
			alert(0);
	}
}
</script>
 
<!-- ImageReady Slices (actualites.psd) -->
<style type="text/css">
<!--
.Style1 {color: #FF0000}
-->
</style>
 
<table id="Tableau_01" width="590" height="367" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td>
			<img src="images/actualites_01.gif" width="28" height="35" alt=""></td>
		<td background="images/actualites_02.gif"><center><b><font color="#FFFFFF" size="1" face="Verdana">EVALUATION</font></b></center></td>
        <td>
			<img src="images/actualites_03.gif" width="26" height="35" alt=""></td>
	</tr>
	<tr>
		<td background="images/actualites_04.gif"></td>
<td width="536" height="297" background="images/spacer.gif" bgcolor="#D0DDEC">
<? ///////////////////////////  ?>
<?php 
 
include("connexionbd.php");
require_once("evaluation.class.php");
 
 
$log=$_SESSION['logss'];
$clt=$_SESSION['idclient'];
$prd=$_GET["produit"];
$nom=$_GET["nom"];
$compteurCom = 0;
        /// Instanciation       
                $eva = new evaluation($page,'where code_client=\''.$clt.'\'');
                                
        echo '<table border="1">';
        echo '<caption><font size="1" face="Verdana" color="#041f2e"><b>Evaluation du '.$nom.' </b></font></caption>'; ?>
 
			<? while(!$eva->eof){
 
				$req=mysql_query("select Critere from critere where id='".$eva->id_critere."'"); 
 
			 while($res=mysql_fetch_array($req)){ 
			?>
	<tr>
      		 <td>
    			<? echo '<font size="2" face="Verdana" color="#041f2e">'.$res['Critere'].'</font>' ; ?>   
     		 </td>
 
      		<td valign="middle">
    			<? 
			  $compteurCom++;
       echo '<table border=0>
	         <tr>
		    <td>
		       <div id="classement'.$compteurCom.'" name="cls">
			   <script>init($compteurCom);</script>
		       </div>
		    </td>
		    <td>
		       <div id="commentaire'.$compteurCom.'"></div>
		    </td>
	      </table>' ?>   
 
      		</td>
	</tr>
 
<? }
$eva->Movenext();
}
echo '</table>';
?>
<? //////////////////////// ?>
 
</td>
<td background="images/actualites_06.gif"></td>
  </tr>
	<tr>
		<td>
			<img src="images/actualites_07.gif" width="28" height="35" alt=""></td>
		<td background="images/actualites_08.gif"></td>
<td>
			<img src="images/actualites_09.gif" width="26" height="35" alt=""></td>
	</tr>
</table>
<!-- End ImageReady Slices -->

qu'en dites-vous? :roll:
Je reçoit seulement les différentes critères à partir de ma base de données mais aucune seule étoile ne s'affiche :aie:

tu peux essayer ce ECHO

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<td valign="middle">
    			<? 
			  $compteurCom++;
       echo '<table border=0>
	         <tr>
		    <td>
		       <div id="classement'.$compteurCom.'" name="cls">
			   <script>init('.$compteurCom.');</script>
		       </div>
		    </td>
		    <td>
		       <div id="commentaire'.$compteurCom.'"></div>
		    </td>
			</tr>
	      </table>' ?>   
 
      		</td>

24/03/2008, 08h48
L'aigle de Carthage

owéééééééé !!! Merci pour votre aide.... ça marche 10/10 :yaisse2:

Je voulais savoir si on peut récupérer le résultat de l'évaluation dans une variable pour la stocker ultérieurement dans ma base de données!!! ;)
24/03/2008, 08h54
htr999

salut
dans compter() tu récupère toutes les valeurs de tabCom[i] dans un tableau. et un petit formulaire avec un champs caché fera l'affaire.
a+
24/03/2008, 09h01
L'aigle de Carthage

ok, je vais l'essayer merci beaucoup comme même ;)
24/03/2008, 10h19
L'aigle de Carthage

a propos .. Ou est ce que je met le return pour avoir le choix du visiteur? car je ne suis pas un pro dans le javascript :oops: ...
Merci

Code:

1
2
3
4
5
6
7
8
switch (tabCom[i].firstChild.nodeValue){
				case "Médiocre"	:  alert("1");	break;
				case "Mauvais"	:  alert("2");	break;
				case "Moyen"	:  alert("3");	break;
				case "Bon"		:  alert("4");	break;
				case "Excellent":  alert("5");	break;
				default:;
			}

à l'endroit des alert(...), tu fais des affectations par exemple

Code:

case "Médiocre" : tabEval[i]=1; break;

donc les 3 évals seront dans le tableau tabEval

a+

24/03/2008, 16h35
L'aigle de Carthage

Je t'ai allourdi par mes questions, n'est ce pas? :roll:
DSL, encore une question:
-comment je peut remettre toute les étoiles vides?... Sorte de reset dans un formulaire...?

-J'ai pas su exactement comment faire pour dégager le choix de l'utilisateur de la fonction compter() :oops:

Merci pour votre coopération :king:
26/03/2008, 16h17
L'aigle de Carthage

-Est ce qu'un bouton de type reset dans le formulaire me permet de réinitialiser les étoiles?

-Est vous pouvez m'epliquer de plus comment on peut obtenir le choix de l'utilisateur surtout que j'ai 3 critères içi... ;)

Merci......:king: