liste déroulante d'image

**moonia** · 10/04/2006, 14h09

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

**moonia** · 10/04/2006, 15h02

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

**XristofGreek** · 10/04/2006, 15h09

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

**moonia** · 10/04/2006, 15h20

merci pour ta reponse , mais dis moi tu ne connais pas une autre solution ???
pour le faire
Merci moon

**XristofGreek** · 10/04/2006, 16h05

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.

**SpaceFrog** · 10/04/2006, 16h22

un truc avec un un ul et des li en utilisant le list-style ...
mais bon c'est pas des plus simples non plus ...

**Auteur** · 11/04/2006, 20h02

bonjour,

voilà sans doute ton bonheur :

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>

Ce script fonctionne sous IE et FF. Je ne l'ai pas testé sur d'autres navigateurs.
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.

liste déroulante d'image

JavaScript

Vue hybride

Discussions similaires

Partager

Partager