Association d'images avec menu deroulant css ou pas?

**Benjea** · 27/10/2012, 10h12

Bonjour à tous,

Je cherche à créer 2 menus déroulants qui me permettraient de choisir dans une liste d'images ce qui s'afficherait au dessus du menu.
Les 2 menus afficheraient 2 images qui se jouxtent.

Il serait souhaitable que cela soit utilisable sur tous les systèmes et tous les navigateurs...
Que me conseillez vous, du CSS?

Voici ce que cela donnerait (avec 3 menus sur l'exemple...):

Uploaded with ImageShack.us

Invité · 27/10/2012, 10h48

Bonjour,
afficher des images dans un <select> n'est pas compatible avec tous les navigateurs.

Il faut voir du coté des "pseudo-listes" sous forme de <ul><li> + JavaScript :
=> Créer un plugin jQuery : une liste déroulante personnalisée
Voir la démo.

**Benjea** · 27/10/2012, 10h59

Bonjour Jérome,

Merci pour ton post, il réponds à une partie de mes besoins, à savoir, mettre des images dans un menu déroulant.

L'autre question est de savoir si je dois utiliser le css pour afficher les images associées une fois le choix fait dans le menu déroulant.
Sachant que j'aurais 2 menu déroulants et 2 images en découlant...
Toujours avec ce besoin compatibilité avec un max de navigateur.

Invité · 27/10/2012, 11h23

L'affichage des grandes images dépendent du choix dans la liste.

Un affichage avec jQuery semble indiqué.
Soit en JavaScript : tableau JavaScript (array) contenant les URL des images => on affiche celle avec le bon identifiant
Soit Ajax : appel à un fichier qui va chercher l'image en BdD,
Soit.... ?
A toi de nous dire comment tu procèdes pour appeler les images...

**Benjea** · 27/10/2012, 11h38

En fait, je pars de ... rien!

Je bidouille un peu de javascript mais ajax connais pas.

Invité · 27/10/2012, 12h52

Il existe des plugin jQuery "tout fait" :
=> recherche Gogole sur "jQuery plugin dropdown list image"
- 10+ jQuery Selectbox/Drop-down Plugins
- ddSlick
- ...

Après... c'est à toi d'écrire le code.

**Benjea** · 27/10/2012, 13h27

Merci, je prends bonne note de ces adresses.
J'ai déjà réussi à tester ce code qui fonctionne:

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
<html>
    <head>
    </head>
    <body>
	<table cellspacing="0"  cellpadding="0">
	<TR>
	<TD>
	<img src="#" alt="" id='fruit1' />
	</TD>
		<TD>
	<img src="#" alt="" id='fruit2' />
	</TD>
	</TR>
 
  	<TR>
	<TD>
	<label>Image : <br />
<select name="skin" onChange="javascript:document.getElementById('fruit1').src = this.value;">
<option value="#"> - </option>
<option value="./images/pomme.jpg">Pomme</option>
<option value="./images/tomate.jpg">Tomate</option>
<option value="anneau.png">poire</option>
</select></label>
 
</TD>
	<TD>
	<label>Image : <br />
<select name="skin" onChange="javascript:document.getElementById('fruit2').src = this.value;">
<option value="#"> - </option>
<option value="./images/pomme.jpg">Pomme</option>
<option value="./images/tomate.jpg">Tomate</option>
<option value="anneau.png">poire</option>
</select></label>
 
</TD>
	</TR>
	<TABLE>
 
 
 
 
 
 
 
    </body>
</html>

Je vais essayer le jquery, c'est nettement plus joli.

Trois questions avant que je ne me lance:
Tu me confirmes que c'est aussi compatible que le javascript?
Pourraisje passer les données images à partir d'une base de données et récupérer le choix de l utilisateur?

Invité · 27/10/2012, 13h48

Tu me confirmes que c'est aussi compatible que le javascript?
Pourrais-je passer les données images à partir d'une base de données et récupérer le choix de l utilisateur?

Oui (jQuery EST du JavaScript. Cependant, la syntaxe est différente), oui et oui.

**Benjea** · 27/10/2012, 13h53

Cool!
Alors je vais m'y intéresser!

Merci encore

Association d'images avec menu deroulant css ou pas?

CSS

Discussions similaires

Partager

Partager