probleme affichage image

**david33b** · 25/02/2010, 16h59

Bonjour,

Je suis en train de créer uen galerie photo sur un site web.
Dans une div apparaissent les miniatures.
Je fais appel à un script JS qui affiche une image survolée dans une div différente faisant apparaître l'image agrandie.
Cela fonctionne très bien.
Le hic, c'est quand je souhaite afficher l'image agrandie sous forme de variable php qui va chercher le nomde la photo.

La requête php pour afficher les miniatures à partir d'un dossier fonctionne
mon probleme est que l'image agrandie est toujours la même, à savoir la dernière des miniatures.

J'éxécute pourtant mon script JS dans la boucle While de la requête.

Voici mon code.

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
<?php 
if (isset($dir)){
	 $dossier=opendir($dir);
						echo '<div id="gallery">';
						while($fichier=readdir($dossier)){
					        $berk=array('.', '..');
 
					        if(!in_array($fichier,$berk)){
					            $lien=$dir.''.$fichier;
					            print '<div style="float:left;border:0px;">';
 
					            if(file_exists($lien)){
						?>
						<a OnMouseOver="javascript:changerimage()" OnMouseOut="javascript:enleverimage()"><img src="<?php print $lien; ?>" width="86px" height="100px" border="0px"></a>
						<script type="text/javascript">
						function changerimage(){
						document.getElementById("image").innerHTML = "<img src='<?php print $lien; ?>' width='359px' height='590px;'/>";
						}
						function enleverimage(){
						document.getElementById("image").innerHTML = "<img src='images/image_gauche_piscine.jpg'/>";
						}
						</script>
						<?php
								}
						print '</div>';
					        }
						}
						echo '</div>';
						}
						?>

Si quelqu'un a une solution pour que mon script
"document.getElementById("image").innerHTML = "<img src='<?php print $lien; ?>"
marche.....

merci beaucoup.

**Thes32** · 25/02/2010, 18h34

Salut,

Qu'as tu dans le html ?

**david33b** · 25/02/2010, 18h39

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
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gilles Lavault - Entretien Parcs & Jardins</title>
<link rel="stylesheet" type="text/css" href="css/style.css" /> 
<script type="text/javascript" src="js/swap.js" ></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
	function changerimage(id_img){
	document.getElementById("image").innerHTML = "<img src='" + id_img + ".jpg' width='359px' height='590px;' />";
	}
	function enleverimage(){
	document.getElementById("image").innerHTML = "<img src='images/image_gauche_piscine.jpg'/>";
	}
</script>
</head>
<body>
	<div id="global">
		<div id="conteneur">
			<div id="bandeau">
				<h1>Entretien Parcs et Jardins Gilles Lavault</h1>
				<h2>Entretien, Am&eacute;nagement, Elagage</h2>
			</div>	<!-- fin div bandeau -->
 
			<div id="contenu_gauche">
				<img src="images/titre_vertical.jpg">
				<p>T&eacute;l. 03 86 37 46 63 / 06 85 91 05 26</p>
			</div>	<!-- fin div Contenu_gauche -->
 
			<div id="contenu_droit">
				<div id="image">
					<img src="images/image_gauche_piscine.jpg">
				</div>	<!-- fin div image -->
 
				<div id="menu">
					<p>
					<a href="index.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('image96','','images/menu/accb.png')"><img src="images/menu/acc.png" name="image96" border="0px"></a><br />
					<a href="gilleslavault_presentation.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('image97','','images/menu/presb.png')"><img src="images/menu/pres.png" name="image97" border="0px"></a><br />
					<a href="gilleslavault_realisations.php"><img src="images/menu/realb.png" name="image98" border="0px"></a><br />
					<a href="gilleslavault_materiel.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('image99','','images/menu/matb.png')"><img src="images/menu/mat.png" name="image99" border="0px"></a><br />
					<a href="gilleslavault_contact.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('image100','','images/menu/contb.png')"><img src="images/menu/cont.png" name="image100" border="0px"></a><br />
					</p>
				</div>	<!-- fin div Menu -->
 
				<div id="contenu_realisations">
					<p class="realisations">Entretien <span style="color:#d7d8d7;font-size:13px;"> - Cliquez sur les cat&eacute;gories ci-dessous pour afficher les images</span></h2>
					<p><a href="gilleslavault_realisations.php?activite=tonte">Tonte</a> -
					   <a href="gilleslavault_realisations.php?activite=taille_haies">Taille de haie et arbustes</a> -
					   <a href="gilleslavault_realisations.php?activite=entretien">Entretien de massifs</a> -
					   <a>Desherbage</a> -<br />
					   <a href="gilleslavault_realisations.php?activite=taille_arbres">Taille des arbres d'ornement et fruitiers</a> -
					   <a href="gilleslavault_realisations.php?activite=elagage">Elagage et abattage</a> -
					   <a href="gilleslavault_realisations.php?activite=dessouchage">Dessouchage</a></p>
 
					<p class="realisations">Am&eacute;nagement</p>
					<p><a href="gilleslavault_realisations.php?activite=cloture">Cl&ocirc;tures</a> -
					   <a href="gilleslavault_realisations.php?activite=terrasse">Terrasse</a> -
					   <a>Am&eacute;nagements all&eacute;es et massifs</a> -
					   <a href="gilleslavault_realisations.php?activite=amenagement_divers">Am&eacute;nagements divers</a> -
					   <a href="gilleslavault_realisations.php?activite=creation">Cr&eacute;ation de jardins</a> -
					   <a href="gilleslavault_realisations.php?activite=restauration">Murs en parpaing ou restauration de mur en pierre</a><p>
 
					<?php 
						if (isset($dir)){
					    $dossier=opendir($dir);
						echo '<div id="gallery">';
						while($fichier=readdir($dossier)){
					        $berk=array('.', '..');
 
					        if(!in_array($fichier,$berk)){
					            $lien=$dir.''.$fichier;
					            print '<div style="float:left;border:0px;">';
 
					            if(file_exists($lien)){
						?>
						<a OnMouseOver="javascript:changerimage('1')" OnMouseOut="javascript:enleverimage()"><img src="<?php print $lien; ?>" width="86px" height="100px" border="0px"></a>
						<a OnMouseOver="javascript:changerimage('2')" OnMouseOut="javascript:enleverimage()"><img src="<?php print $lien; ?>" width="86px" height="100px" border="0px"></a>
						<a OnMouseOver="javascript:changerimage('3')" OnMouseOut="javascript:enleverimage()"><img src="<?php print $lien; ?>" width="86px" height="100px" border="0px"></a>
						<a OnMouseOver="javascript:changerimage('4')" OnMouseOut="javascript:enleverimage()"><img src="<?php print $lien; ?>" width="86px" height="100px" border="0px"></a>
 
						<?php
								}
						print '</div>';
					        }
						}
						echo '</div>';
						}
						?> 		
				</div>  <!-- fin div Contenu Texte -->