[PHP-JS] Affichage liste déroulante

Version imprimable

Bonjour,
J'ai une liste déroulante, qui est alimentée par ma base de données... Le souci c'est que quand l'utilisateur sélectionne un élément de ma liste déroulante je voudrais que des images s'affichent selon ce qui l'a choisi. Je m'explique :
Dans ma liste déroulante j'ai : Vacances, Stage
Quand l'utilisateur choisis vacances, sa affiche les images de la catégorie vacances.
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 <?php //connection a la BDD include('connection.php'); include('index.php'); // Séléction les noms des rubriques dans l'ordre alphabétique $req = ("SELECT NomRubrique FROM rubri order by NomRubrique asc"); // Execution de la requete $result = mysql_query($req); ?>  Quelle rubrique voulez vous afficher ? <select name="choix" > <option value="choix3" selected="selected">Choissisez votre rubrique !</option> <?php while ($donnees = mysql_fetch_array($result)) { // Affichage du nom de la rubrique echo "<option value = '$donnees[NumeroRubrique]'>".$donnees['NomRubrique']. "</option>"; } $test = $_POST['choix']; ?> </select> <br> <?php

12/01/2009, 14h49
cadoudal56
Hello,

Ta question concerne du javascript en réalité...
En gros, tu affiches une image comme ceci à l'endroit que tu souhaites.
Ensuite, tu places un évenement sur la liste déroulante de manière a ce que l'image change quand la sélection change
Code:

1 2 3 4 5 6 <img name="monimage" id="monimage" src=""> <select name="choix" onChange="document.monimage.src=this.value+'.jpg'"> .... </select>
Cela va demander quelques adaptations car je manque d'éléments, mais l'esprit y est...
@+
cadou

Bon bah c'est côté Javascript alors !

Code:

1
2
3
4
5
6
7
8
9
function afficheImage(){
	var d=document.NomDuForm;
	var v=d.choix.options[d.choix.options.selectedIndex].value;
	switch(v){
		case 'vacances': var pix='vacances1.jpg'; break;
		case 'stage': var pix='mon_stage.gif'; break;
	}
	document.getElementById('show').innerHTML='<img src="'+pix+'">';
}

Code:

1
2
3
4
5
<form action="toto.php" method="post" name="NomDuForm">
<!-- blablabla -->
<select name="choix" onchange="afficheImage();">
<!-- blablabla -->
</form>

Code:

1
2
<b>Illustration :</b>
<div id="show"></div>

(>.<) cadoudal56 est trop rapide

12/01/2009, 14h52
cadoudal56

Ton code a l'air plus compliqué...
Mais là c'est toi qui voit...
Tu peux faire plus court..

@+
cadou

Merci pour vos réponses aussi rapides, mais le souci c'est que mes images sont stockées dans ma base de données ce qui veut dire que je ne peux pas faire le code suivant :
Code:

1 2 3 4 5 6 7 8 9 10 function afficheImage(){ var d=document.NomDuForm; var v=d.choix.options[d.choix.options.selectedIndex].value; switch(v){ case 'vacances': var pix='vacances1.jpg'; break; case 'stage': var pix='mon_stage.gif'; break; } document.getElementById('show').innerHTML='<img src="'+pix+'">'; }
Je voudrais qu'il m'affiche les images concernant les vacances ou le stage qui sont stockées dans la base de données.

Alors PHP va cracher du Javascript.

Code:

1
2
3
4
5
6
7
8
9
var tab=new Array(
<?php
$req="SELECT * FROM images"; // tu fais ta requête pour lister code/image
$result = mysql_query($req);
while($data = mysql_fetch_array($result))'
	echo "new Array('".$data['code']."', '".$data['image']."')";
}
?>
);

Code:

1
2
3
4
5
6
7
8
function afficheImage(){
	var d=document.NomDuForm;
	var v=d.choix.options[d.choix.options.selectedIndex].value;
	for(var i=0; i<tab.length; i++){
		if(v==tab[i][0]){var pix=tab[i][1]; break;}
	}
	document.getElementById('show').innerHTML='<img src="'+pix+'">';
}

12/01/2009, 15h04
cadoudal56

Les images sont réellement dans la base de données ?
Ou ce sont les chemins vers ces images ?

@+
cadou
12/01/2009, 15h07
Meloooo

Oui pardon je me suis mal exprimée, ce sont bien sur les chemins des images qui sont stockées dans la base de données.
Je suis vraiment désolé mais le javascript et moi ca fait 8, si je pouvais avoir quelques explication sur le code que vous m'avez fournie que je comprends qu'a moitié, sa serait vraiment très gentil de votre part.
12/01/2009, 15h18
cadoudal56

Le mien ne fonctionne que si le nom des valeurs des OPTIONS correspondent au nom des images...

@+
cadou
12/01/2009, 15h32
Meloooo

Merci tout de même pour avoir répondu à ma question...
Mais je n'arrive toujours pas à m'en sortir...
Est-ce possible en javascript d'ouvrir un pop up avec tout les images concernant la catégorie séléctionnée ?
13/01/2009, 11h34
Meloooo

Problème réglé sans javascript ! :D
13/01/2009, 12h15
s.n.a.f.u

Citation:

Envoyé par Meloooo

Problème réglé sans javascript ! :D

Il eut été de bon ton de donner au moins un synopsis de la solution. :?

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
 
 
 
<?php
//connection a la BDD
	include('connection.php');
	include('index.php');
 
 
 
 
 
	// Séléction les noms des rubriques dans l'ordre alphabétique
	$req = ("SELECT NomRubrique, NumeroRubrique FROM rubri order by NomRubrique asc");
	// Execution de la requete
	$result = mysql_query($req);
	?>
	<!-- Création de la liste déroulante -->
	Quelle rubrique voulez vous afficher ? 
	<form action="rubrique.php" method="POST">
	<select name="choix">
	<option value="0" selected="selected">Choissisez votre rubrique !</option>
 
 
 
	<?php
	while ($donnees = mysql_fetch_array($result))
					{
					// Affichage du nom de la rubrique
					?>
 
						<?php
						"<option value = '$donnees[NumeroRubrique]'>".$donnees['NomRubrique']. "</option>";
					}
 
	?>
	</select>
	<input type="submit" name="button"> 
	</form>
<br>
<?php
 
if (isset ($_POST['choix']))
	{
	$x = $_POST['choix'];
 
 
	// Parcours résultat
	$requete = "SELECT LienImage as miniature,ImageAgrandie FROM imagereduite WHERE NumeroRubrique = ".$x;
		// Execution de la requete
		$resultat = mysql_query($requete);
 
		while ($donnee = mysql_fetch_array($resultat))
		{
 
			// Affichage des photos reduites et agrandies
			echo '<a href="photos/agrandies/'.$donnee[1].'" rel="lightbox"><img border="0" src="photos/reduites/'.$donnee[miniature].'">;</a>';
 
		}
	}
else
{
	//Requete séléction rubrique
	$req = "SELECT * FROM rubri ;";
	// Execution de la requete
	$result=mysql_query($req);
	// Parcours résultat
 
	while ($row= mysql_fetch_array($result))
	{
 
 
		// Deux colonnes qui correspondent à LienImage et à ImageAgrandie
		echo $row[0]." ".$row[1];
		// Requete permettant l'affichage des images reduites et agrandies
 
		$requete = ("SELECT LienImage as miniature,ImageAgrandie FROM imagereduite WHERE NumeroRubrique = ".$row[0]);
		// Execution de la requete
		$resultat = mysql_query($requete);
 
		while ($donnee = mysql_fetch_array($resultat))
		{
 
			// Affichage des photos reduites et agrandies
			echo '<a href="photos/agrandies/'.$donnee[1].'" rel="lightbox"><img border="0" src="photos/reduites/'.$donnee[miniature].'">;</a>';
 
		}
 
 
	}
 
}

Voila jml94 c'est fait ;)