Liste déroulante avec image
Fermé
LMBA
Messages postés
12
Date d'inscription
mardi 21 août 2012
Statut
Membre
Dernière intervention
5 avril 2014
-
22 août 2012 à 17:39
LMBA Messages postés 12 Date d'inscription mardi 21 août 2012 Statut Membre Dernière intervention 5 avril 2014 - 23 août 2012 à 15:44
LMBA Messages postés 12 Date d'inscription mardi 21 août 2012 Statut Membre Dernière intervention 5 avril 2014 - 23 août 2012 à 15:44
A voir également:
- Liste déroulante avec image
- Liste déroulante excel - Guide
- Frédéric cherche à faire le buzz sur les réseaux sociaux. il a ajouté une image de manchots sur une image de plage. retrouvez l'image originale de la plage. que cachent les manchots ? ✓ - Forum Windows
- Recherche par image - Guide
- Supprimer liste déroulante excel ✓ - Forum Excel
- Image iso - Guide
4 réponses
Penicilline28
Messages postés
52
Date d'inscription
samedi 21 juillet 2012
Statut
Membre
Dernière intervention
2 juillet 2013
6
23 août 2012 à 15:02
23 août 2012 à 15:02
Alors en utilisant le Javascript tu pourras afficher une image grâce au "Onchange".
Je te mets un exemple que j'avais fait il y a quelques mois pour un site :
<HTML>
<SELECT onchange="selectChangestate(this)" name="state" >
<OPTION VALUE="undefined"><SELECTED>Choose</SELECTED></OPTION>
<OPTION VALUE="1 - Open">Open</OPTION>
<OPTION VALUE="2 - In progress">In Progress</OPTION>
<OPTION VALUE="3 - Waiting">Waiting</OPTION>
<OPTION VALUE="4 - Done">Done</OPTION>
</SELECT>
<img id="1 - Open" style="display:none;" src="/images/rouge.png"/>
<img id="2 - In progress" style="display:none;" src="/images/orange.png"/>
<img id="3 - Waiting" style="display:none;" src="/images/jaune.png"/>
<img id="4 - Done" style="display:none;" src="/images/vert.png"/>
</HTML>
<JAVASCRIPT>
function selectChangestate(selected){
var _val = selected.options[selected.selectedIndex].value;
var display = "none";
if ( _val == "1 - Open"){
display = "block";
}
document.getElementById("1 - Open").style.display = display;
var _val = selected.options[selected.selectedIndex].value;
var display = "none";
if ( _val == "2 - In progress"){
display = "block";
}
document.getElementById("2 - In progress").style.display = display;
var _val = selected.options[selected.selectedIndex].value;
var display = "none";
if ( _val == "3 - Waiting"){
display = "block";
}
document.getElementById("3 - Waiting").style.display = display;
var _val = selected.options[selected.selectedIndex].value;
var display = "none";
if ( _val == "4 - Done"){
display = "block";
}
document.getElementById("4 - Done").style.display = display;
}
</JAVACRIPT>
Prend exemple la dessus si tu veux, et si tu a des questions n'hésite surtout pas.
Je te mets un exemple que j'avais fait il y a quelques mois pour un site :
<HTML>
<SELECT onchange="selectChangestate(this)" name="state" >
<OPTION VALUE="undefined"><SELECTED>Choose</SELECTED></OPTION>
<OPTION VALUE="1 - Open">Open</OPTION>
<OPTION VALUE="2 - In progress">In Progress</OPTION>
<OPTION VALUE="3 - Waiting">Waiting</OPTION>
<OPTION VALUE="4 - Done">Done</OPTION>
</SELECT>
<img id="1 - Open" style="display:none;" src="/images/rouge.png"/>
<img id="2 - In progress" style="display:none;" src="/images/orange.png"/>
<img id="3 - Waiting" style="display:none;" src="/images/jaune.png"/>
<img id="4 - Done" style="display:none;" src="/images/vert.png"/>
</HTML>
<JAVASCRIPT>
function selectChangestate(selected){
var _val = selected.options[selected.selectedIndex].value;
var display = "none";
if ( _val == "1 - Open"){
display = "block";
}
document.getElementById("1 - Open").style.display = display;
var _val = selected.options[selected.selectedIndex].value;
var display = "none";
if ( _val == "2 - In progress"){
display = "block";
}
document.getElementById("2 - In progress").style.display = display;
var _val = selected.options[selected.selectedIndex].value;
var display = "none";
if ( _val == "3 - Waiting"){
display = "block";
}
document.getElementById("3 - Waiting").style.display = display;
var _val = selected.options[selected.selectedIndex].value;
var display = "none";
if ( _val == "4 - Done"){
display = "block";
}
document.getElementById("4 - Done").style.display = display;
}
</JAVACRIPT>
Prend exemple la dessus si tu veux, et si tu a des questions n'hésite surtout pas.
Penicilline28
Messages postés
52
Date d'inscription
samedi 21 juillet 2012
Statut
Membre
Dernière intervention
2 juillet 2013
6
23 août 2012 à 14:31
23 août 2012 à 14:31
Salut,
si tu souhaite rester en HTML, il me semble que ce n'est pas possible de l'intégrer directement dans la liste car les liste déroulante HTML ne le gère pas.
Par contre en jQuery ça doit être possible, tu peut aussi afficher une image, en fonction de ce que tu viens de sélectionner dans ta liste, à coté de la liste grâce au javascript.
si tu souhaite rester en HTML, il me semble que ce n'est pas possible de l'intégrer directement dans la liste car les liste déroulante HTML ne le gère pas.
Par contre en jQuery ça doit être possible, tu peut aussi afficher une image, en fonction de ce que tu viens de sélectionner dans ta liste, à coté de la liste grâce au javascript.
LMBA
Messages postés
12
Date d'inscription
mardi 21 août 2012
Statut
Membre
Dernière intervention
5 avril 2014
23 août 2012 à 14:51
23 août 2012 à 14:51
salut,
oui je souhaite rester en html, en faite je dois récupérer les noms et les images dans une table. Toute façon si je réussis à afficher ça dans ma page, ça serait bien même en utilisant du javascript.
Cdt
oui je souhaite rester en html, en faite je dois récupérer les noms et les images dans une table. Toute façon si je réussis à afficher ça dans ma page, ça serait bien même en utilisant du javascript.
Cdt
LMBA
Messages postés
12
Date d'inscription
mardi 21 août 2012
Statut
Membre
Dernière intervention
5 avril 2014
23 août 2012 à 15:44
23 août 2012 à 15:44
salut,
merci, je vais essayer pour l'instant je suis bloqué sur un popup;
merci, je vais essayer pour l'instant je suis bloqué sur un popup;