info bulle sur un Select

**marti** · 10/07/2006, 15h03

Bonjour,

Je souhaiterais mettre des infos bulle sur les valeurs d'une liste déroulante au niveau des options dans un Select.

Merci d'avance

**SpaceFrog** · 10/07/2006, 15h16

c'est devenu un classique ...
ce n'est possible en crossbrowser qu'en créant soi même son select ...

**marti** · 10/07/2006, 15h38

désolé mais je n'ai pas compris.....

**vince_grenoblois** · 10/07/2006, 15h40

info bulle de quel sorte ?

Parce que sinon il suffit de mettre

Code :

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

1
2
 
<option title="ton texte d'info bulle">

**SpaceFrog** · 10/07/2006, 16h17

pas sous IE .....
il n'y a que moz ffx qui reconnaisse le title d'une option ...

**vince_grenoblois** · 10/07/2006, 16h26

Envoyé par SpaceFrog

pas sous IE .....
il n'y a que moz ffx qui reconnaisse le title d'une option ...

C'est pas faux...
Encore une raison de plus d'utiliser IE

Mouaip mais y'a encore du monde à convaincre... et en attendant ...

**Choupinou** · 10/07/2006, 16h26

j'avais fait un truc dans le genre. J'avais du refaire mon propre select. Par contre moi c'était pas un select déroulant mais apres c'est juste un peu de js pour cacher le div qui contient la liste. Voila comment j'ai fais (j'ai plus l'exemple alors c'est de mémoire) :
1) tu définit toutes les valeurs du select en lien <a href....>
2) tu rajoute l'action onmouseover sur chaque lien pour appeler une fonction afficheInfoBulle(texte) qui positionne un div puis l'affiche sur la page.
3) tu rajoute l'action onmouseout sur chaque lien pour cacher le div si la souris est plus sur le lien dessus
4) tu fais un ti css tout beau pour ressembler à une liste (ou autre chose si tu veux)

voilà j'espere que ca va t'aider

**marti** · 11/07/2006, 09h38

Peut-on me donner un exemple concret ? merci

**marti** · 13/07/2006, 15h54

??????

**linar009** · 13/07/2006, 16h18

Utilisez la classe overlib qui se trouve être très pratique :

OVERLIB

après plus qu'à faire un bon vieu :

Code :

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

1
2
onmouseover="return overlib('aaaaaaa',RIGHT,CLOSECLICK,CAPTION,
'PARAMETRES');\" OnMouseOut='nd();"

**marti** · 17/07/2006, 11h29

Est ce quelqu'un peut me donner un exemple d'info bulle sur les options d'un Select ?

Merci d'avance

**linar009** · 17/07/2006, 13h05

Code :

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

1
2
3
4
5
6
7
<SELECT name='nom' style='WIDTH:100px' onmouseover="return overlib(document.getElementById('nom').selected.label,RIGHT,CLOSECLICK,CAPTION,
'PARAMETRES');\" OnMouseOut='nd();" >
<OPTION label='aucune couleur' value='' SELECTED>...</OPTION>
<OPTION label='couleur blanche' value='BLANC'>BLANC</OPTION>
<OPTION label='couleur rouge' value='ROUGE'>ROUGE</OPTION>
<OPTION label='couleur verte' value='VERT'>VERT</OPTION>
</SELECTED>

en ayant pris soin d'avoir téléchargé la librairie Overlib

**marti** · 17/07/2006, 14h01

Voici le code de mapage HTML :

<html>
<head>
<SCRIPT LANGUAGE="JavaScript1.2" src="overlib.js"></SCRIPT>
</head>
<body>
<SELECT name='nom' style='WIDTH:100px' onmouseover="return

overlib(document.getElementById('nom').selected.label,RIGHT,CLOSECLICK,CAPTION,
'PARAMETRES');\" OnMouseOut="nd();" >
<OPTION label='aucune couleur' value='' SELECTED>...</OPTION>
<OPTION label='couleur blanche' value='BLANC'>BLANC</OPTION>
<OPTION label='couleur rouge' value='ROUGE'>ROUGE</OPTION>
<OPTION label='couleur verte' value='VERT'>VERT</OPTION>
</SELECTED>
</body>
</html>

Je reçois le code erreur :

ligne : 7
car : 15
Erreur : caractère incorrect

Quelqu'un peut-il m'aider ?

**linar009** · 17/07/2006, 14h19

Enlevez le \ avant le guillemet après l'appel de la fonction overlib

**marti** · 17/07/2006, 14h46

j'ai enlevé le \ mais je reçois l'erreur suivante :

document.getElementById('nom').selected.label a la valeur null ou n'est pas un objet

Peut-on m'aider svp ?

**linar009** · 17/07/2006, 14h49

Essayez plutôt :

document.getElementById('nom').options[document.getElementById('nom').selectedIndex].label

**marti** · 18/07/2006, 10h32

ok mais comment peut-on afficher la bulle informative au dessus de la zone Select ?

**SpaceFrog** · 18/07/2006, 10h35

les options n'acceptent pas de title ni de onmouseover de façon crossbrowser (si mes souvenirs sont bons moz et ffx les reconnaissent mais pas ie)

Il faut donc faire son propre select en bidouillant avec des divs ou un tableau et en jouant sur les display ou les visibility ...
ensuite les div ou les td acceptant les title ou onmouseover on peut y adjoindre des infobulles ...