2 Questions à propos d'un script

**L'aigle de Carthage** · 22/03/2008, 09h41

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 :

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

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

**Jumano** · 22/03/2008, 09h51

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 :

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

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 :

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

1
2
 
<div id="commentaire" class="laclassquetuasdefini" >

**L'aigle de Carthage** · 22/03/2008, 10h30

9a n'as pas marché

**Jumano** · 22/03/2008, 10h35

Envoyé par L'aigle de Carthage

9a n'as pas marché

Qu'est ce qui n'a pas marché ?

**htr999** · 22/03/2008, 10h42

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

suite de ce POST abandonné !.!

**L'aigle de Carthage** · 22/03/2008, 10h55

Merci beaucoup, ton nouveau script est parfait!!!

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

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

**htr999** · 22/03/2008, 11h10

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

Code :

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

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 :

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

a+

**htr999** · 22/03/2008, 11h48

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

a+

**L'aigle de Carthage** · 22/03/2008, 12h21

Tu es un SuperUltraExper du javascript

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?

**htr999** · 22/03/2008, 12h27

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+

**L'aigle de Carthage** · 22/03/2008, 12h49

ça n'as pas marché

J'ai fait le script suivant

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

Je reçoit seulement les différentes critères à partir de ma base de données mais aucune seule étoile ne s'affiche

**htr999** · 22/03/2008, 16h58

tu peux essayer ce ECHO

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

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

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

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

**htr999** · 24/03/2008, 08h54

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+

**L'aigle de Carthage** · 24/03/2008, 09h01

ok, je vais l'essayer merci beaucoup comme même

**L'aigle de Carthage** · 24/03/2008, 10h19

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

...
Merci

**htr999** · 24/03/2008, 10h32

Code :

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

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 :

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

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

donc les 3 évals seront dans le tableau tabEval

a+

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

Je t'ai allourdi par mes questions, n'est ce pas?

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

Merci pour votre coopération

**L'aigle de Carthage** · 26/03/2008, 16h17

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

2 Questions à propos d'un script

JavaScript

Discussions similaires

Partager

Partager