Image dans la liste déroulante
Bonjour,
Je travaille actuellement les images dans la liste déroulante pour les absences des élèves (matin ou après-midi ou journée).
Lorsqu'il y a une seule liste déroulante, l'image sélectionnée apparaît sans problème.
Mais lorsqu'il y a plusieurs listes déroulantes (pour une raison des jours dans le mois), je vous montre le lien suivant : http://www.irpa-epdsae.fr/die_calend...egende_bis.php les images sélectionnées n'apparaissent pas.
J'ai mis en évidence des lignes en couleur :
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
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title>
<link href="test.css" rel="stylesheet" type="text/css">
<script language="javascript">
function change() {
select = document.getElementById("select");
select_s = select.style;
switch(select.selectedIndex) {
case 0 :
select_s.background = "url('images/icone_presence_journee_v2.png') no-repeat";
break;
case 1 :
select_s.background = "url('images/icone_absence_matin_v2.png') no-repeat";
break;
case 2 :
select_s.background = "url('images/icone_absence_apresmidi_v2.png') no-repeat";
break;
case 3 :
select_s.background = "url('images/icone_absence_journee_v2.png') no-repeat";
break;
default:
select_s.background = "none";
break;
}
}
</script>
</head>
<body>
<?php
if (isset($_POST['maj']))
{
echo "Processus n°1 <br />";
$compteur=1;
while ($compteur<=5)
{
$valeur_recuperee="absence" . $compteur;
$absence_recuperee=$_POST[$valeur_recuperee];
echo $absence_recuperee;
$compteur++;
}
}
$compteur=1; ?>
<form id="form1" name="form1" method="post" action=""><?php
while($compteur<=5)
{
$tableau="absence" . $compteur; ?>
<select id="<?php echo $tableau; ?>" onchange="change();" name="<?php echo $tableau; ?>">
<option value="0" style="background:url('images/icone_presence_journee_v2.png') no-repeat; width:15px; height:15px;"></option>
<option value="1" style="background:url('images/icone_absence_matin_v2.png') no-repeat; width:15px; height:15px;"></option>
<option value="2" style="background:url('images/icone_absence_apresmidi_v2.png') no-repeat; width:15px; height:15px;"></option>
<option value="3" style="background:url('images/icone_absence_journee_v2.png') no-repeat; width:15px; height:15px;"></option>
</select><?php
$compteur++;
} ?>
<input type="submit" name="maj" value="Envoyer" />
</form>
<p> </p>
<p><strong>Légende :</strong></p>
<p> <img src="images/icone_presence_journee_v2.png" width="15" height="15" /> Usager présent <br />
<img src="images/icone_absence_matin_v2.png" width="15" height="15" /> Absent le matin<br />
<img src="images/icone_absence_apresmidi_v2.png" width="15" height="15" /> Absent l'après-midi<br />
<img src="images/icone_absence_journee_v2.png" width="15" height="15" /> Absent la journée </p>
</body>
</html> |
Ma difficulté est de faire une relation entre :
Code:
<select id="<?php echo $tableau; ?>" ...>
et le JavaScript :
Code:
select=document.getElementById("select");
Je ne trouve pas un moyen de remplacer document.getElementById("select") par la valeur récupérée dans $tableau.
Merci de votre aide.
Bien cordialement
