Association d'images avec menu deroulant css ou pas?

Version imprimable

27/10/2012, 10h12
Benjea

Association d'images avec menu deroulant css ou pas?

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...):

http://img824.imageshack.us/img824/7906/miximage.jpg

Uploaded with ImageShack.us
27/10/2012, 10h48
Invité

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.
27/10/2012, 10h59
Benjea

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.
27/10/2012, 11h23
Invité

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...
27/10/2012, 11h38
Benjea

En fait, je pars de ... rien! :)

Je bidouille un peu de javascript mais ajax connais pas.
27/10/2012, 12h52
Invité

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.

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

Code:

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?

27/10/2012, 13h48
Invité

Citation:

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.
27/10/2012, 13h53
Benjea

Cool!
Alors je vais m'y intéresser!
:)
Merci encore