Une image dans un <select>

**VonDriguen** · 31/01/2014, 08h28

Bonjour à tous,

Je ne sais pas si ce message doit aller dans le HTML ou le CSS (car je ne sais pas d'où vient le problème). En cas de mauvais topic, merci à un administrateur de déplacer mon poste...

Bref, je voudrais créer un éditeur de texte et comme sur ce forum, pour la couleur, je voudrais afficher des icônes de couleur plutôt que du texte... J'ai essayé ceci :

Code :

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

1
2
3
4
5
<p><select onchange="insertTag('<color nom=&quot;' + this.options[this.selectedIndex].value + '&quot;>', '</color>', 'textarea');">
	<option value="none" class="selected" selected="selected">Couleur</option>
	<option value="silver" class="imgsilver"></option>
	<option value="gray"><img src="../images/colors/grey.png" alt="grey" /></option>
</select></p>

Code css :

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

1
2
3
.imgsilver {
	background-image: url{../images/colors/silver.png}
}

Comme vous pouvez le voir, pour la couleur gris, j'ai essayé d'ajouter l'image avec une balise <img> et pour la couleur argent, j'ai essayé depuis le css. Les liens sont bons (car depuis Eclipse, il link bien avec l'image) mais rien n'y fait, rien ne s'affiche

Quelqu'un peut-il me dire d'où pourrait provenir le problème ???

Merci !

**VonDriguen** · 31/01/2014, 09h08

Pour info,

La solution du CSS fonctionne en fait sous firefox, mais pas sous IE

Quelqu'un sait comment résoudre ça ???

Merci

**Bisûnûrs** · 31/01/2014, 09h55

Tu ne peux pas utiliser <select> pour ça, tu dois coder ta propre liste déroulante.

**Bovino** · 31/01/2014, 10h07

Dans les cours et tutoriels CSS :

Donner du style aux listes déroulantes.

**VonDriguen** · 04/02/2014, 12h13

Non, décidément, ça ne fonctionne pas !!! J'arrive à mettre du texte en couleur, mais dès que je cible le background où une image, ça ne fonctionne plus sous IE.

Mais lorsque je regarde le code source de ce site je vois qu'ils utilisent un tableau... Mais je ne trouve aucune fonction qui appelle l'ouverture de la palette de couleur...

Quelqu'un pourrait-il m'aider ???

**Vil'Coyote** · 04/02/2014, 15h58

si tu commençais par fournir un peu de code ? histoire de voir ou tu en est et ce que tu essais de faire.

**Bovino** · 04/02/2014, 16h18

Oui, bien d'accord, parce que mon collègue qui essayait de deviner le code dans les entrailles de chat, il s'est prit un an ferme hier... ça donne pas trop envie de l'imiter !

**Auteur** · 05/02/2014, 01h00

Il y a fort longtemps (Bovino n'était pas encore inscrit sur le site, c'est dire si c'est vieux

) j'avais codé ce genre de chose :
http://www.developpez.net/forums/d26...lantes-images/

Ce code est antédiluvien donc je ne garantie pas qu'il fonctionnera avec les navigateurs actuels.

**Bisûnûrs** · 05/02/2014, 09h46

Envoyé par Auteur

Il y a fort longtemps (Bovino n'était pas encore inscrit sur le site, c'est dire si c'est vieux

) j'avais codé ce genre de chose :
http://www.developpez.net/forums/d26...lantes-images/

Et il y a un peu moins fort longtemps (Mais Bovino n'était pas encore inscrit sur le site non plus, c'est dire si c'est vieux

) j'avais écrit ceci :
http://j-willette.developpez.com/tut...ormulaire/#LIV

Envoyé par Auteur

Ce code est antédiluvien donc je ne garantie pas qu'il fonctionnera avec les navigateurs actuels.

Pareil, faudrait presque que je rajoute un warning en tout début de page pour dire que c'est sans doute trop vieux ...

**Auteur** · 05/02/2014, 10h33

Tes listes ont un bel aspect

Je pense que l'on peut facilement mettre à jour ton code.
A part le href="javascript:void(0)", je n'ai pas l'impression qu'il y ait d'éléments incompatibles avec les normes actuelles.

**VonDriguen** · 05/02/2014, 13h30

Envoyé par Bovino

Oui, bien d'accord, parce que mon collègue qui essayait de deviner le code dans les entrailles de chat, il s'est prit un an ferme hier... ça donne pas trop envie de l'imiter !

Ha ben bravo, j'ai éclaté de rire devant les collègues !

Sinon, j'ai finalement opté pour une autre solution... Le fait est que je ne connais absolument rien au javascript et j'essaye de l'utiliser le moins possible car je n'aime pas quand un comportement se trouve du côté utilisateur...

J'ai donc un tableau, les td contiennent de listes (avec mes petits carrés de couleurs) qui s'affichent dès que l'utilisateur passe sa souris dessus.

Exemple, le html :

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
<table class="dropdown_menu">
	<tr>
		<td>
			<ul>
				<li>Couleurs
					<ul>
						<li><img src="../images/colors/silver.png" onclick="insertTag('<color nom=&quot;silver&quot;>', '</color>', 'textarea');" /></li>
						<li><img src="../images/colors/gray.png" onclick="insertTag('<color nom=&quot;gray&quot;>', '</color>', 'textarea');" /></li>
						<li><img src="../images/colors/black.png" onclick="insertTag('<color nom=&quot;black&quot;>', '</color>', 'textarea');" /></li>
						<li><img src="../images/colors/white.png" onclick="insertTag('<color nom=&quot;white&quot;>', '</color>', 'textarea');" /></li>
						<li><img src="../images/colors/red.png" onclick="insertTag('<color nom=&quot;red&quot;>', '</color>', 'textarea');" /></li>
						<li><img src="../images/colors/maroon.png" onclick="insertTag('<color nom=&quot;maroon&quot;>', '</color>', 'textarea');" /></li>
						<li><img src="../images/colors/lime.png" onclick="insertTag('<color nom=&quot;lime&quot;>', '</color>', 'textarea');" /></li>
						<li><img src="../images/colors/green.png" onclick="insertTag('<color nom=&quot;green&quot;>', '</color>', 'textarea');" /></li>
						<li><img src="../images/colors/yellow.png" onclick="insertTag('<color nom=&quot;yellow&quot;>', '</color>', 'textarea');" /></li>
						<li><img src="../images/colors/olive.png" onclick="insertTag('<color nom=&quot;olive&quot;>', '</color>', 'textarea');" /></li>
						<li><img src="../images/colors/blue.png" onclick="insertTag('<color nom=&quot;blue&quot;>', '</color>', 'textarea');" /></li>
						<li><img src="../images/colors/navy.png" onclick="insertTag('<color nom=&quot;navy&quot;>', '</color>', 'textarea');" /></li>
						<li><img src="../images/colors/fuchsia.png" onclick="insertTag('<color nom=&quot;fuchsia&quot;>', '</color>', 'textarea');" /></li>
						<li><img src="../images/colors/purple.png" onclick="insertTag('<color nom=&quot;purple&quot;>', '</color>', 'textarea');" /></li>
						<li><img src="../images/colors/aqua.png" onclick="insertTag('<color nom=&quot;aqua&quot;>', '</color>', 'textarea');" /></li>
						<li><img src="../images/colors/teal.png" onclick="insertTag('<color nom=&quot;teal&quot;>', '</color>', 'textarea');" /></li>
					</ul>
				</li>
			</ul>
		</td>
		<td>
			<ul>
				<li>Background
					<ul>
						<li><img src="../images/colors/silver.png" onclick="insertTag('<background couleur=&quot;bgsilver&quot;>', '</background>', 'textarea');" /></li>
						<li><img src="../images/colors/gray.png" onclick="insertTag('<background couleur=&quot;bggray&quot;>', '</background>', 'textarea');" /></li>
						<li><img src="../images/colors/black.png" onclick="insertTag('<background couleur=&quot;bgblack&quot;>', '</background>', 'textarea');" /></li>
						<li><img src="../images/colors/white.png" onclick="insertTag('<background couleur=&quot;bgwhite&quot;>', '</background>', 'textarea');" /></li>
						<li><img src="../images/colors/red.png" onclick="insertTag('<background couleur=&quot;bgred&quot;>', '</background>', 'textarea');" /></li>
						<li><img src="../images/colors/maroon.png" onclick="insertTag('<background couleur=&quot;bgmaroon&quot;>', '</background>', 'textarea');" /></li>
						<li><img src="../images/colors/lime.png" onclick="insertTag('<background couleur=&quot;bglime&quot;>', '</background>', 'textarea');" /></li>
						<li><img src="../images/colors/green.png" onclick="insertTag('<background couleur=&quot;bggreen&quot;>', '</background>', 'textarea');" /></li>
						<li><img src="../images/colors/yellow.png" onclick="insertTag('<background couleur=&quot;bgyellow&quot;>', '</background>', 'textarea');" /></li>
						<li><img src="../images/colors/olive.png" onclick="insertTag('<background couleur=&quot;bgolive&quot;>', '</background>', 'textarea');" /></li>
						<li><img src="../images/colors/blue.png" onclick="insertTag('<background couleur=&quot;bgblue&quot;>', '</background>', 'textarea');" /></li>
						<li><img src="../images/colors/navy.png" onclick="insertTag('<background couleur=&quot;bgnavy&quot;>', '</background>', 'textarea');" /></li>
						<li><img src="../images/colors/fuchsia.png" onclick="insertTag('<background couleur=&quot;bgfuchsia&quot;>', '</background>', 'textarea');" /></li>
						<li><img src="../images/colors/purple.png" onclick="insertTag('<background couleur=&quot;bgpurple&quot;>', '</background>', 'textarea');" /></li>
						<li><img src="../images/colors/aqua.png" onclick="insertTag('<background couleur=&quot;bgaqua&quot;>', '</background>', 'textarea');" /></li>
						<li><img src="../images/colors/teal.png" onclick="insertTag('<background couleur=&quot;bgteal&quot;>', '</background>', 'textarea');" /></li>
					</ul>
				</li>
			</ul>
		</td>
	</tr>
</table>

Et le css :

Code css :

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
.dropdown_menu {
	display: block;
	width: 150px;
}
 
.dropdown_menu ul {
	text-decoration: underline;
	list-style-type: none;
}
 
.dropdown_menu ul ul {
	display: none;
	background-color: #D4D4D4;
	list-style-type: none;
	padding: 3px;
}
 
.dropdown_menu ul li:hover ul {
	display:block;
}
 
.dropdown_menu li ul {
	position:absolute;
}

Merci quand même pour vos réponses.

Une image dans un <select>

HTML

Discussions similaires

Partager

Partager