Boucle liste image

Version imprimable

Boucle liste image

Bonjour, j'ai hésité entre ici et le forum php j'espère ne pas mettre trompé.
-----------
J'ai un menu déroulant qui permet d'afficher une liste d'image avec l'évènement "onChange", je me demande s'il est possible de le mettre dans un "for" pour avoir plusieurs listes sur une même page.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
/*Affiche image selectionnee*/
echo "<script type=\"text/javascript\" language=\"JavaScript\">\n";
echo "function swapImage() {\n";
echo "var image = document.getElementById(\"imageToSwap\");\n";
echo "var dropd = document.getElementById(\"dd\");\n";
echo "image.src = dropd.value;\n";
echo "}\n";
echo "</script>\n";
 
for($m = 0;$m < 3;$m++){
echo '<div><img id="imageToSwap['.$m.']" src="imgtesta/1.gif" />
<br /><br />
<select id="dd['.$m.']" name="newimg" onChange="swapImage()">
<option value="imgtesta/1.png">1.png</option>
<option value="imgtesta/2.gif">2.gif</option>
<option value="imgtesta/3.gif">3.gif</option>
<option value="imgtesta/4.gif">4.gif</option>
<option value="imgtesta/5.jpg">5.jpg</option>
</select></div><br />';
}

Merci !

02/02/2009, 09h44
marcha
Salut,

Oui c'est possible, une manière de faire c'est de passer $m à ta fonction:
Code:

1 2 onchange="swapImage($m)"
Code:

1 2 3 4 function swapImage(suffix) { var image = document.getElementById("imageToSwap_" + suffix); ...
Je pense que les [ ] ne sont pas des caractères valide pour un ID (à vérifier)
tu pourrais simplement coller $m à un préfixe connu. éventuellement avec
un underscore pour améliorer la lisibilité.
Code:

1 2 echo '<div><img id="imageToSwap_$m" src="imgtesta/1.gif" />

Merci ca fonctionne =

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
/*Affiche image selectionnee*/
echo "<script type=\"text/javascript\" language=\"JavaScript\">\n";
echo "function swapImage(suffix) {\n";
echo "var image = document.getElementById(\"imageToSwap\" +suffix);\n";
echo "var dropd = document.getElementById(\"dd\" +suffix);\n";
echo "image.src = dropd.value;\n";
echo "}\n";
echo "</script>\n";
 
for($m = 0;$m < 3;$m++){
echo '<div><img id="imageToSwap_'.$m.'" src="imgtesta/1.gif" />
<br /><br />
<select id="dd_'.$m.'" name="newimg" onChange="swapImage('.$m.')">
<option value="imgtesta/1.png">1.png</option>
<option value="imgtesta/2.gif">2.gif</option>
<option value="imgtesta/3.gif">3.gif</option>
<option value="imgtesta/4.gif">4.gif</option>
<option value="imgtesta/5.jpg">5.jpg</option>
</select></div><br />';
}

Bonjour, une question supplémentaire ; si dans mon value j'ai 2 valeurs, est-ce possible d'utiliser un "explode" pour javascript ?

J'ai essayé comme ca :

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
 
/*Affiche image selectionnee*/
echo "<script type=\"text/javascript\" language=\"JavaScript\">\n";
echo "function swapImage(suffix) {\n";
echo "var myArray = document.getElementById(\"suffix\".exlpode(","));\n";
echo "var image = document.getElementById(\"imageToSwap_\" +myArray[1]);\n";
echo "var dropd = document.getElementById(\"dd\" +myArray[1]);\n";
//echo "var image = document.getElementById(\"imageToSwap\" +suffix);\n";
//echo "var dropd = document.getElementById(\"dd\" +suffix);\n";
echo "image.src = dropd.value;\n";
echo "}\n";
echo "</script>\n";
 
for($m = 0;$m < 3;$m++){
echo '<div><img id="imageToSwap_'.$m.'" src="imgtesta/1.gif" />
<br /><br />
<select id="dd_'.$m.'" name="newimg" onChange="swapImage('.$m.')">
/*modif ajoute de 1,2,3, ds value*/
<option value="1,imgtesta/1.png">1.png</option>
<option value="2,imgtesta/2.gif">2.gif</option>
<option value="3,imgtesta/3.gif">3.gif</option>
<option value="4,imgtesta/4.gif">4.gif</option>
<option value="5,imgtesta/5.jpg">5.jpg</option>
</select></div><br />';
}

En faisant comme ca, l'image ne s'affiche pas donc c pas bon mais pourquoi ?

Merci !

03/02/2009, 10h12
marcha

Salut,

explode a besoin de deux arguments, voir ici

De plus tu as placé ton explode dans le code javascript si tu l'écrit ainsi.

Que veux tu faire avec deux valeurs ?
03/02/2009, 10h25
oim
J'ai fait un tableau avec des for pour le nombre de lignes et de colonnes, en haut du tableau j'ai mis un compteur "$num = 0" et à la fin "$num++" ca me permet de connaitre l'emplacement exact des cases comme ca pour l'enregistrement ds la base je n'enregistre pas tt le tableau mais juste les case ayant du contenu.
--------
Donc quand je selectionne une image avec le code du haut j'ai besoin d'avoir le nom de l'image (c bon ca) mais également ca case $num. C pour ca que dans le select pour les options j'ai "value=" 1 , imgtesta/1.png "".
J'ai essaye de mettre l'explode dans le javascript pour que "suffix" prenne le value[1] c-à-dire l'image.

http://img242.imageshack.us/img242/8...almozd8.th.png

Pour le séparateur c vrai mais la facon ecrite est un exemple que j'avais trouvé sur le net
Code:

1 2 3 4 5 6 echo "var myArray = document.getElementById(\"suffix\".exlpode(","));\n"; ca ? echo "var myArray = document.getElementById(exlpode(",", suffix));\n";
03/02/2009, 11h20
marcha

Salut,

Je ne changerai rien au niveau du suffix il contient le numéro de la liste
et ça devrait suffire.

Par contre il te faut extraire l'url de l'image de la value de l'option
et ceci en javascript avec split (l'équivalant d'explode)

Code:

echo "image.src = dropd.value.split(',')[1];\n";
03/02/2009, 11h23
oim

T'es un chef merci, ca fonctionne très bien