Coucou
Je voudrais créer une liste déroulante sous html mais à la place du nom du champs ,je veux proposer une liste d'image GIF est ce que ça se fais : : : et si oui comment le faire
Merci d'avance
Coucou
Je voudrais créer une liste déroulante sous html mais à la place du nom du champs ,je veux proposer une liste d'image GIF est ce que ça se fais : : : et si oui comment le faire
Merci d'avance
Coucou
Je voudrais créer une liste déroulante sous html mais à la place du texte qui va etre deroule je voudrais faire derouler des image GIF.
est ce que ça se fais ?? si oui comment le faire??? sinon qlq'1 pourrai me proposer une autre solution
Merci d'avance
si çà se fait oui bien sûr ! mais c'est compliqué à mettre en place.
Enfin si çà t'interesse vraiment il y a un framework javascript que tu peux étendre : dojo:
http://dojotoolkit.org/
bon courage
les gens qui s'ennuient sont des gens sans imagination.
merci pour ta reponse , mais dis moi tu ne connais pas une autre solution ???
pour le faire
Merci moon
ben des solutions y'en a à la pelle mais c'est compliqué et là j'ai pas le temp alors si tu veux pas le faire renseigne toi et fais un peu de recherche sur le net çà doit bien se trouver.
les gens qui s'ennuient sont des gens sans imagination.
un truc avec un un ul et des li en utilisant le list-style ...
mais bon c'est pas des plus simples non plus ...
Ma page Developpez - Mon Blog Developpez
Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
Votre post est résolu ? Alors n'oubliez pas le Tag
Venez sur le Chat de Développez !
bonjour,
voilà sans doute ton bonheur :
Ce script fonctionne sous IE et FF. Je ne l'ai pas testé sur d'autres navigateurs.
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156 <html> <head> <title>Exemple de menu deroulant personnalise</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Language" content="fr"> <meta name="Description" content="Menu deroulant"> <meta name="Author" content="Auteur(<a href="http://www.developpez.com)">" target="_blank">www.developpez.com)"></a> <style type="text/css"> <!-- body{ color: #005555; background-color: #A1D2C3; } /** Feuille de styles du menu deroulant **/ /** le 11/04/2006 **/ .Bouton, .Liste{ /** Aspect general du bouton et de la liste **/ cursor: pointer; color: #000000; border-width: 3px; border-color: #DDEEFF; /** Couleur de la bordure **/ background-color: #DDEEFF; /** Couleur de fond du menu **/ width: 100px; text-align: center; padding: 0px; } .Bouton{ /** Style du bouton **/ float: left; /** necessaire ? **/ border-style: outset; } .Liste{ /** Style de la liste **/ display: none; position: absolute; border-style: inset; height: 100px; /** Hauteur de la liste **/ overflow: auto; } .Item{ /** Style des elements de la liste **/ margin-left: 5px; margin-top: 0px; margin-right: 5px; margin-bottom: 0px; width: 85%; /** 85% a cause de l'ascenseur du div "idListe" **/ } .ItemOver{ /** Style des elements de la liste MouseOver **/ background-color: #4444FF; /** Couleur du surlignage **/ } img{ height: 30px; /** homogeneite des images **/ width: 30px; } /** Fin de la feuille de styles **/ //--> </style> <script type="text/javascript"> <!-- /** Script du menu deroulant **/ /** le 11/04/2006 **/ function AfficheItem() { var elmtL = document.getElementById("idListe"); var elmtB = document.getElementById("idBouton"); if (elmtL.style.display!="block") { /* Pour donner l'impression que le bouton est enfonce ('inset') : */ elmtB.style.borderStyle = "inset"; elmtL.style.display = "block"; elmtL.style.left = elmtB.offsetLeft; //Affichage sous le bouton (par defaut) elmtL.style.top = parseInt(elmtB.offsetTop + elmtB.offsetHeight); if ( (parseInt(elmtL.offsetTop + elmtL.offsetHeight - document.body.scrollTop))>= (parseInt(document.body.clientHeight)) ) { //Affichage au-dessus du bouton elmtL.style.top = parseInt(elmtB.offsetTop - elmtL.offsetHeight); } } else { /** Bouton 'outset' **/ elmtB.style.borderStyle = "outset"; elmtL.style.display="none"; } } function CacheItem(obj,url,idImage) { var source = document.getElementById(idImage); var dest = document.getElementById("idI0"); document.getElementById("idListe").style.display="none"; document.getElementById("idBouton").style.borderStyle = "outset";; MouseOutItem(obj); //Suppression du surlignage de l'item choisi. //Affichage, gestion de l'evenement onclick dest.src = source.src; // window.location.href = url; } function MouseOverItem(obj) { /** Styles Over **/ obj.className = "Item ItemOver"; } function MouseOutItem(obj) { /** Styles par defaut **/ obj.className = "Item"; } /** Fin du script **/ //--> </script> </head> <body> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <hr> <!--Exemple de liste deroulante code HTML--> <div> <div id="idBouton" class="Bouton" onclick="AfficheItem()"><img id="idI0" src="i0.gif"></div> <div class="Liste" id="idListe"> <p class="Item" onmouseover="MouseOverItem(this)" onmouseout="MouseOutItem(this)" onclick="CacheItem(this,'url_1','idI1')"><img id="idI1" src="i1.gif"></p> <p class="Item" onmouseover="MouseOverItem(this)" onmouseout="MouseOutItem(this)" onclick="CacheItem(this,'url_2','idI2')"><img id="idI2" src="i2.gif"></p> <p class="Item" onmouseover="MouseOverItem(this)" onmouseout="MouseOutItem(this)" onclick="CacheItem(this,'url_3','idI3')"><img id="idI3" src="i3.gif"></p> <p class="Item" onmouseover="MouseOverItem(this)" onmouseout="MouseOutItem(this)" onclick="CacheItem(this,'url_4','idI4')"><img id="idI4" src="i4.gif"></p> <p class="Item" onmouseover="MouseOverItem(this)" onmouseout="MouseOutItem(this)" onclick="CacheItem(this,'url_5','idI5')"><img id="idI5" src="i5.gif"></p> </div> </div> <br clear="all"> <!--Fin Exemple de liste deroulante code HTML--> <hr> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </body> </html>
Petites explications :
-IE : le placement de ce menu dans un tableau peut présenter quelques soucis de positionnement de la liste dans la page
-AfficheItem() affichage de la liste lors du clic sur bouton
-MouseOverItem(ObjetElementDeLaListe) style de l'item lors du onmouseover
-MouseOutItem(ObjetElementDeLaListe) style de l'item lors du onmouseout
-CacheItem(ObjetElementDeLaListe,'url','idImage')" Action realisee lors du clic sur l'item
-la série de <br> dans le code HTML n'est là que pour mettre en évidence le comportement du menu lorsque le bouton se trouve en bas ou en haut de la fenêtre (la liste apparait alors au-dessus ou en dessous du bouton).
-lors de la copie du script n'oublie pas le <br clear="all"> après le menu.
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager