Pb d'affichage d'une image à la volée, choisie dans une liste déroulante

**Angelseb** · 07/02/2007, 17h00

Bonjour,

j'ai un petit pb, j'ai un programme PHP qui liste des images d'un répertoire, il affiche le nom des images dans une liste déroulante, jusque là rien d'extra. Lorsque l'utilisateur choisit dans la liste déroulante une image, je souhaiterai que celle-ci soit affichée à la volée en dessous, d'où l'utilisation de la fonction OnChange dans la balise select.

Mais lorsque j'essaie le test, il ne se passe rien. Je suis novice en Javascript.

Voici le 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
<html><body><form name="form1" method="post" action="">
  <label> Liste des fichiers pr&eacute;sents dans le r&eacute;pertoire de destination (Images) : <br>
  <select name="choix" id="choix" OnChange="document.getElementById("pic").src = 'images/' + document.getElementById("choix").options[document.getElementById("choix").selectedIndex].value;">
<option value=""></option>
<?php
$rep = opendir("images");
while(false !== ($fichier = readdir($rep)))
{
        if($fichier != "." && $fichier != "..")
        {
        echo "<option value=\"".$fichier."\">".$fichier."</option>";
    }
}
closedir($dir);
?>
  </select>
  </label>
  <img src="images/defaut.jpg" name="pic"/>
</form>
</body>
</html>

Merci d'avance

**mikemarti** · 07/02/2007, 21h22

A première vue ça a l'air correct...
Faudrait peut être passer par une fonction plutôt que de mettre ton code dans le onChange.
C'est plus "propre" et ça permet de faire des "alert();" pour faire des tests.

Sinon bah essaie déjà de mettre onChange voire onchange à la place de OnChange. Jpense qu'il y a un problème de casse.

**marcha** · 07/02/2007, 22h40

Y'a un problème d'imbrication de guillemets. Tu utilises les doubles
guillemets pour délimiter la valeur de l'attribut onchange. Tu devrais
utiliser que des simple guillemets dans la valeur.

Fait comme Angelseb a dit... soit une fonction

Code :

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

1
2
3
4
5
 
function changeImage(liste) {
  var v = liste.options[liste.selectedIndex].value;
  document.getElementById("pic").src = 'images/' + v;
}

Code :

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

1
2
3
4
 
<select onchange="changeImage(this);">
...
</select>

**Angelseb** · 08/02/2007, 00h20

Merci pour vos réponses

Ca marche niquel maintenant.

J'ai également changé le code et fait appel à une fonction. Une autre question par contre :

Est-ce possible de ne rien afficher lorsque l'utilisateur affiche la page la 1ère fois?

Je veux dire, dans mon code actuel, j'ai mis une image par défaut lors de l'affichage de la page, mais je voudrais ne pas avoir d'image par défaut, lorsque l'utilisateur n'a pas encore sélectionné une image dans la liste ou lorsqu'il n'y a pas encore d'images dans le répertoire.

EDIT:
Voilà j'ai trouvé! Mais d'abord une autre question :
dans ma 1ère version du code, j'ai utilisé la méthode getElementById alors que j'avais définis un nom (name="pic") et non un id, est-ce qu'il serait alors plus correcte d'utiliser la méthode getElementByName alors?

Voici mon code pour ceux que ça intéresserait :

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
<html>
<head>
<script type="text/javascript">
<!--
function changeImage(liste)
{
var v = liste.options[liste.selectedIndex].value;
if(v == "defaut")
{
	document.getElementById('pic').style.visibility = "hidden";
}
else
{
	document.getElementById('pic').style.visibility = "";
	document.getElementById('pic').src = 'images/' + v;
}
}
 
function tester(liste)
{
	if(liste == "defaut")
	{
		document.getElementById('pic').style.visibility = "hidden";
	}
}
-->
</script>
</head>
 
<body onload="tester(document.getElementById('choix').options[document.getElementById('choix').selectedIndex].value);" >
 
<form name="form1" method="post" action="">
  <label> Liste des fichiers pr&eacute;sents dans le r&eacute;pertoire de destination (Images) : <br>
  <select name="choix" onchange="changeImage(this);">
 
<option value="defaut"></option>
<?php
$rep = opendir("images");
while(false !== ($fichier = readdir($rep)))
{
        if($fichier != "." && $fichier != "..")
        {
        echo "<option value=\"".$fichier."\">".$fichier."</option>";
    }
}
closedir($dir);
?>
  </select>
  <br><br>
  <img src="images/defaut.jpg" name="pic" id="pic"/>
  </label>
</form>
</body>
</html>

**marcha** · 08/02/2007, 10h00

Envoyé par Angelseb

Est-ce possible de ne rien afficher lorsque l'utilisateur affiche la page la 1ère fois?

Oui, tu mets un attribut style='visibility: hidden' à ta balise img. Ensuite, dans ta
fonction tu modifies le style ainsi:

Code :

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

1
2
 
document.getElementById('pic').style.visibility = 'visible';

Envoyé par Angelseb

Voilà j'ai trouvé! Mais d'abord une autre question :
dans ma 1ère version du code, j'ai utilisé la méthode getElementById alors que j'avais définis un nom (name="pic") et non un id, est-ce qu'il serait alors plus correcte d'utiliser la méthode getElementByName alors?

Si la fonction getElementByName existait... peut-être

Dis moi si je me trompe.

**E.Bzz** · 08/02/2007, 10h10

Envoyé par marcha

Si la fonction getElementByName existait...

Pourquoi ce conditionnel ?

A+

**marcha** · 08/02/2007, 10h31

Envoyé par E.Bzz

Pourquoi ce conditionnel ?

A+

getElementsByName() retourne un tableau d'éléments DOM, car il peut exister
plusieurs éléments qui portent le même nom

C'est pourquoi la fonction getElementByName() n'existe pas. (au singulier)

Contrairement à getElementById() qui ne peut retourner qu'un élément, c'est
pourquoi elle est au singulier.

On pourrait donc utiliser getElementsByName() pour retrouver l'élément
désiré mais il faudrait alors extraire le premier élément du tableau retourné.

**E.Bzz** · 08/02/2007, 10h53

Ah oui, c'est sûr que pour utiliser une fonction prédéfinie faut s'adapter à son fonctionnement ...

A+

Pb d'affichage d'une image à la volée, choisie dans une liste déroulante

JavaScript

Discussions similaires

Partager

Partager