Afficher des images en fonction de la sélection des listes déroulantes

Version imprimable

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:

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.

28/02/2018, 10h20
MelkInarian
Citation:

Envoyé par NouveauDev

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:

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.
28/02/2018, 10h27
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.
28/02/2018, 10h37
MelkInarian

Pour faire cela, j'utilise le CSS, les flex boxes.
28/02/2018, 11h10
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...
28/02/2018, 11h40
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.
28/02/2018, 13h10
MelkInarian
Citation:

style="visibility:...;

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

Citation:

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:

1 2 3 <div id="DivImg">  <img id="Image0" src="res/Img/Res/Defaut.png" alt="Image par défaut" > </div>
en modifiant (en JS) l'attribut 'src' pour pointer sur une autre image.
Code:

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

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:

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:

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 ...

28/02/2018, 14h28
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
28/02/2018, 16h00
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.