Discussion :

[NouveauDev]

Bonjour à tous,

J'ai créé un formulaire dans lequel s'affiche des images en fonction de la sélection.

Si la valeur est valide j'affiche l'image "check" sinon j'affiche "croix".
Si je ne touche pas au css pour masquer mes images, elles s'affichent les unes à côté des autres à côté de mes listes déroulantes.
Lorsque j'affiche mon formulaire, l'image "croix" est visible.

Si la valeur sélectionné est valide je masque l'image "croix" et affiche l'image "check".
Seulement l'image se met en dessous de ma liste déroulante !

Pareil si je resélectionne une valeur non valide, l'image croix se met en dessous de ma liste déroulante !

Voici le code d'une de mes liste :

Code HTML :

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
<td>SITUATION</td>
						<td>
							<SELECT name="Choix2" id="ch2" size="1" style="width:150px" onChange="Lien2()">
								<OPTION value="01">Choix</OPTION>
								<OPTION value="0">Aucune</OPTION>
								<OPTION value="1">Sans emploi</OPTION>
								<OPTION value="3">Etudiant</OPTION>
								<OPTION value="6">Salarié</OPTION>
							</SELECT>
							<img src="D:\Users\MonUser\Documents\JAVASCRIPT\croix.png" id="imX2" alt="" height="25" width="25" style.display="none"/>
							<img src="D:\Users\MonUser\Documents\JAVASCRIPT\check.png" id="imC2" alt="" height="25" width="25" style.display="none"/>
							<script>
                                                        //On récupère la valeur de l'élément sélectionné
                                                                                function Lien2(){
                                                                        if(document.getElementById("ch2").value == "01"){
                                                                        //      alert(this.value);
                                                                                document.getElementById('imX2').style.display="block";
                                                                                document.getElementById('imC2').style.display="none";
                                                                }
                                                                        if(document.getElementById("ch2").value !== "01"){
                                                                                document.getElementById('imX2').style.display="none";
                                                                                document.getElementById('imC2').style.display="block";
                                                                }
                                                        }
                                                        </script>
						</td>

Merci pour votre aide.

[MelkInarian]

Seulement l'image se met en dessous de ma liste déroulante !

Pareil si je resélectionne une valeur non valide, l'image croix se met en dessous de ma liste déroulante !

il me semble bien que c'est ce qui est demandé, dans l'ordre le select puis les images

Code HTML :

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

1
2
<td><SELECT><OPTION>Choix</OPTION>...</SELECT>
<img src="D:\Users\MonUser\Documents\JAVASCRIPT\croix.png" id="imX2" alt="" height="25" width="25" style.display="none"/>

où faudrait-il afficher les images?
à aucun moment il n'est défini de position d'affichage sinon dans un hypothétique fichier CSS.

[NouveauDev]

Bonjour et merci pour votre réponse rapide.

J'aimerais afficher les images à côté de mes listes déroulantes, comme l'image "croix" de départ.

[MelkInarian]

Pour faire cela, j'utilise le CSS, les flex boxes.

[NouveauDev]

J'avais déjà regardé cette méthode mais honnêtement je ne comprend pas.
Je débute et j'essai de m'y retrouver.

Ce que je ne comprend pas c'est pourquoi mes images sont correctement affichées et lorsque je les rend invisible puis visible elles se mettent en dessous de ma liste déroulante...

[NouveauDev]

J'ai réussi en mettant style="visibility:hidden;" dans l'appel de l'image et dans le code javascript, en fonction de la sélection j'ai mis .style.visibility="hidden" et .style.visibility="visible".

Le seul souci est qu'elles sont l'une à côté de l'autre et pas une sur l'autre.

[MelkInarian]

style="visibility:...;

L'élément occupe un espace, qu'il soit visible ou non, avec

style="visibility:hidden;

il est invisible mais bien là.
pour s'en convaincre il suffit de placer deux éléments contigus de faire varier la visibilité puis d'inverser leur position et de faire varier la visibilité.
Il reste aussi une possibilité en affectant un espace avec un élément vide et de faire varier le contenu :

Code HTML :

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

1
2
3
<div id="DivImg"> <!-- affichage de l'image -->
<img id="Image0" src="res/Img/Res/Defaut.png" alt="Image par défaut" >
</div><!-- #DivImg FIN d'affichage de l'image-->

en modifiant (en JS) l'attribut 'src' pour pointer sur une autre image.

Code :

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

1
2
document.getElementById('Image0').src = 'res/Img/Res/autre.png';
document.getElementById('Image0').alt= 'L\'image qui me va bien';

[NouveauDev]

Merci pour votre réponse mais cela ne fonctionne pas...aucune image apparaît quand je sélectionne un élément...

En dessous de mon select :

Code HTML :

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

1
2
3
<div id="DivImg">
		<img id="Image0" src="D:\Users\Documents\JAVASCRIPT\croix.png" height="25" width="25" alt="" >
</div>

Dans mon javascript :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<script>
		function Lien(){
					if(document.getElementById("ch").value == "01"){
								document.getElementById('Image0').src = "D:\Users\Documents\JAVASCRIPT\croix.png";
					}
					if(document.getElementById("ch").value !== "01"){
								document.getElementById('Image0').src = "D:\Users\Documents\JAVASCRIPT\check.png";
                                                                document.getElementById('Image0').style.height= "20px";
						                document.getElementById('Image0').style.width= "20px";
					}
		}
</script>

Je ne comprend pas ce qui ne fonctionne pas ...

[MelkInarian]

Je me rend compte que je me suis mal exprimé dans : "Il reste aussi une possibilité en affectant un espace avec un élément vide et de faire varier le contenu : "
ce n'est pas à la place du positionnement en CSS mais avec les flex boxes.
il y a ainsi moyen de positionner côte à côte le select (dans un div) et l'image (dans un autre div) le tout dans un div conteneur.
https://developer.mozilla.org/fr/doc...flexbox_en_CSS

[NouveauDev]

Depuis hier je suis dessus et je ne m'en sort pas.

Je vais essayer de trouver une solution.

Merci beaucoup pour votre aide.