Discussion :

[zeroara]

Bonjour

mon problème est le suivant :
je dispose d'un tableau associatif php et j'aurai voulu savoir si lors de l'exécution d'une fonction java script il était possible de faire passer une variable java script comme indice.

Je vous joint le code si dessous pour être plus clair :

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
<div id='gallery'>
 
 
		<script language="javascript">
 
		function ChangeImage(i) {
 
			 var image = "<?php $tableau["+i+"]['nomFichier']; ?>"
			 alert(image)
			 alert(i)
		}
		</script> 
 
 
 
<?php 
echo "<em id='miniImages'>";	
 
if(isset($_GET['page']) )
{
		$i = $_GET['page'];
}
else // Sinon
{
     $i= 0;  
}
$j = 0;
while ($j <= $nb && $i <= $total-1 ){
		echo "
					<img id='img' onClick=\"ChangeImage(".$i.");\" src='upload/".$images[$i]['nomFichier']."' WIDTH=50px  />&nbsp;";
$j++;
$i++;
}

la fonction ChangeImage est bien appelé car le alert(i) me retourne bien l'indice (il ne marche que quand les deux première ligne de la fonction sont en commentaire).

J'ai lus dans la fac qu'on pouvait convertir un tableau associatif php en tableau javas sript mais cela semblait difficile voila pourquoi je demande si une solution de ce genre existe.

Merci d'avance

[sebhm]

Bonjour,

le PHP s'execute avant que ta page ne soit chargée.
Le Javascript apres.

Donc impossible de lancer une instruction PHP dans ta fonction en Javascript.
Pour t'en persuader, regarde le code source de ta page HTML générée.

Si tu veux utiliser un tableau existant en PHP dans ton code Javascript, il faudra convertir ton tableau PHP en Javascript lors du chargement de ta page, donc comme c'est dit dans la FAQ.
Tu trouveras également plein de posts là dessus en utilisant la fonction Rechercher

[zeroara]

d'accord merci de répondre si vite à mon interrogation.

Je verrais ça cette après midi en espérant que ça fonctionne.

[micetf]

Bonjour,

Est-ce que la boucle while qui génère les balises img
avec un id="img" ne risque pas de poser problème ?
L'attribut id est censé être unique sur une page.

Personnellement,
je ne connais pas la finalité de la fonction changeImage(),
mais j'aurais fait en sorte que la boucle while génère des balises img
avec des attributs id numérotés (img0,img1,...),

Code :

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

1
2
3
4
5
while ($j <= $nb && $i <= $total-1 ){
  echo '<img id="img'.$i.'" onClick="ChangeImage('.$i.');" src="upload/'.$images[$i]['nomFichier'].'" width="50px"  />&nbsp;';
  $j++;
  $i++;
}

Ainsi, dans la fonction changeImage(i),
j'accèderais aux attributs de ces balises
grace à la méthode document.getElementById.
Par exemple, pour avoir le nom du fichier image :

Code :

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

document.getElementById('img'+i).src;

La construction d'un tableau javascript ne serait alors peut-être plus nécessaire.

Fred

[zeroara]

en fait c'est une galerie la boucle sert à généré des miniatures des images de la galerie et la fonction changeImage sert a récupéré l'indice de l'image sur laquelle on clic pour l'afficher (avec diverse info comme sont nom, description ...)

si tu pense que ton idée est toujours une bonne option pourrais tu l'expliquer un peu plus je ne l'ai pas totalement compris


edit : j'ai utilisé json et ça marche malheureusement lorsque je fais un document.write il me change de page pour m'afficher ce qu'il faut sur une page blanche.

[micetf]

Je pensais à quelque chose de ce type :

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
 
<script language="javascript">
function ChangeImage(i) {
	 var image = document.getElementById('img'+i);
   document.getElementById('image').src=image.src;
   document.getElementById('image').alt=image.alt;
   document.getElementById('no').innerHTML=i;
   document.getElementById('titre').innerHTML=image.title;
}
</script> 
 
<div  style="text-align:center;">	
<h1>Miniatures avec toutes les infos nécessaires<br/>(nom, description)</h1> 
<p>
<?php 
$images = array(
  array('oiseau','magnifique photo d\'un oiseau'),
  array('chien','magnifique photo d\'un chien'),
  array('chat','magnifique photo d\'un chat'),
  array('lapin','magnifique photo d\'un lapin')
  );
foreach ($images as $iImg => $image){
?>
<img id="img<?php echo $iImg; ?>" onClick="ChangeImage(<?php echo $iImg; ?>);" src="upload/<?php echo $image[0].'.png'; ?>" alt="<?php echo $image[0]; ?>"  title="<?php echo $image[1]; ?>" width="50px" style="cursor:pointer;" />&nbsp;
<?php 
}
?>
</p>
 
 
 
<h1>Agrandissement de l'image choisie avec sous-titrage<br/>(Mis à Jour par la fonction ChangeImage())</h1>
<h2><img id="image" src="" alt="" width="200px" /></h2>
<p style="background-color:yellow;">Image n° <span id="no"></span> - Titre = <span id="titre"></span></p>
</div>
 
<script type="text/javascript">ChangeImage(0);</script>

Fred

[zeroara]

Je viens d'esseyer vite fait ta solution mais cela ne marche pas (je l'ai surment fais trop vite)

Comme dis plus haut j'arrive a avoir mes valeurs avec le Json seul bemol je n'arrive pas a modifier la valeur du background de la balise div galleri

[micetf]

Pour mettre à 'blue' la valeur du background de la balise div gallery
tu dois pouvoir essayer ceci :

Code :

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

document.getElementById('gallery').style.backgroundColor='blue';

Fred

[zeroara]

J'ai esseyer ça mais ça ne marche pas je continue de chercher.

Code :

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

document.getElementById("gallery").style.backgroundImage = 'upload/'+image

[Bovino]

Code :

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

document.getElementById("gallery").style.backgroundImage = 'url(upload/'+image+')';

[zeroara]

aaaah ça marche merci beaucoup j'avais esséyé avec url mais j'avais du me tromper dans un ' .

Je passe en résolu un grand merci encore vous m'enlever une grosse épine du pied