info bulle sur un Select

Version imprimable

10/07/2006, 15h03
marti

info bulle sur un Select

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
10/07/2006, 15h16
SpaceFrog

c'est devenu un classique ...
ce n'est possible en crossbrowser qu'en créant soi même son select ...
10/07/2006, 15h38
marti

désolé mais je n'ai pas compris.....
10/07/2006, 15h40
vince_grenoblois
info bulle de quel sorte ?

Parce que sinon il suffit de mettre
Code:

1 2 <option title="ton texte d'info bulle">
10/07/2006, 16h17
SpaceFrog

pas sous IE .....
il n'y a que moz ffx qui reconnaisse le title d'une option ...
10/07/2006, 16h26
vince_grenoblois

Citation:

Citation:

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 ... :? :roll:
10/07/2006, 16h26
Choupinou

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
11/07/2006, 09h38
marti

Peut-on me donner un exemple concret ? merci
13/07/2006, 15h54
marti

??????
13/07/2006, 16h18
linar009
Utilisez la classe overlib qui se trouve être très pratique :

OVERLIB

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

1 2 onmouseover="return overlib('aaaaaaa',RIGHT,CLOSECLICK,CAPTION, 'PARAMETRES');\" OnMouseOut='nd();"
17/07/2006, 11h29
marti

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

Merci d'avance

Code:

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

17/07/2006, 14h01
marti

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 ?
17/07/2006, 14h19
linar009

Enlevez le \ avant le guillemet après l'appel de la fonction overlib
17/07/2006, 14h46
marti

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 ?
17/07/2006, 14h49
linar009

Essayez plutôt :

document.getElementById('nom').options[document.getElementById('nom').selectedIndex].label
18/07/2006, 10h32
marti

ok mais comment peut-on afficher la bulle informative au dessus de la zone Select ?
18/07/2006, 10h35
SpaceFrog

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 ...
18/07/2006, 10h37
linar009

Citation:

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)

Si si les SELECT acceptent bien les onMouseOver ...
18/07/2006, 10h38
linar009

Citation:

Envoyé par marti

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

Pourquoi où s'affiche t'elle ?
18/07/2006, 10h39
SpaceFrog

linar ... je sais que les ophtalmos sont un peu débordés en ce moment ...

nous parlons ici des options ... pas des select ...

si tu arrives à me declancher un évènement onmouseover sur une option sous IE c'est que tu es dans une autre dimension ...
18/07/2006, 10h41
linar009

Citation:

Envoyé par SpaceFrog

linar ... je sais que les ophtalmos sont un peu débordés en ce moment ...

nous parlons ici des options ... pas des select ...

si tu arrives à me declancher un évènement onmouseover sur une option sous IE c'est que tu es dans une autre dimension ...

Tout à fait d'accord avec toi !
Mais je ne vois où serait l'intérêt d'avoir un onMouseOver sur une option...
18/07/2006, 10h48
SpaceFrog

je ne juge pas ...
du point de vue ergonomique ça peut avoir un intéret de donner une explication sur un choix ...
18/07/2006, 10h51
linar009

C'est vrai.
D'ailleurs j'utilise la méthode que j'ai donné à marti dans un de mes scripts et j'en suis très heureux.
Chaque option de mon select a son info-bulle avec une petite description.
18/07/2006, 10h57
SpaceFrog

8O 8O 8O

Code:

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

tu veux dire avec ça ???

j'ai testé dans tous les sens et ... rien ...

tu aurais un bout de code complet de select avec des labels qui font des info bulles ???

Code:

1
2
3
4
5
6
7
8
9
10
11
retour += "<SELECT name='predef_parammodenbjours" + prop + "' onMouseOver = 'return overlib(document.getElementById(\"predef_parammodenbjours" + prop + "\").options[document.getElementById(\"predef_parammodenbjours" + prop + "\").selectedIndex].label,RIGHT,CLOSECLICK,CAPTION,\"PARAMETRES\");' OnMouseOut= 'nd();' ";
		if (param[1].slice(0,4) == '<NBJ' ) retour += " >\n";
		else retour += " STYLE='DISPLAY:none'>\n";
		if (param[1].search('C') != -1){
			retour += "<OPTION LABEL='azerty' VALUE=''>Nombre de jours fixe</OPTION>\n";
			retour += "<OPTION LABEL='azerty' VALUE='C' SELECTED>Nombre de jours calculé</OPTION>\n";
		} else {
			retour += "<OPTION LABEL='azerty' VALUE='' SELECTED>Nombre de jours fixe</OPTION>\n";
			retour += "<OPTION LABEL='azerty' VALUE='C'>Nombre de jours calculé</OPTION>\n";
		}
		retour += "</SELECT>\n";

Après il faut balancer retour sur une page HTML

18/07/2006, 11h14
linar009

Sérieusement ça fonctionne très bien!
Bon j'avoue l'info-bulle ne s'affiche qu'une fois l'option sélectionnée (moi c'est ce que je voulais) mais je pense qu'en changeant onMouseOver, il y a possibilités de créer une variante...
18/07/2006, 11h22
marti

Mea Culpa, j'ai oublié de dire que c'est pour un Select avec une taille > 1. Dans ce cas, l'info-bulle passe derrière le tableau des options possibles( cf exemple ci-dessous ). Donc comment faire pour que l'info s'affiche au dessus du tableau des options. Merci d'avance

<html>
<head>
<SCRIPT src="overlib.js"></SCRIPT>
</head>
<body>

<SELECT name='14' size='4' style='WIDTH:100px' onMouseOver="return

overlib(document.getElementById('14').options[document.getElementById('14').selectedIndex].label,RIGHT,CLOSECLICK,CAPTION,
'Libellé en entier');" OnMouseOut="nd();" >
<OPTION label='aucune couleur' value='' SELECTED>...</OPTION>
<OPTION label='couleur blancheretertertertetretertertertertertet' value='BLANC'>BLANC</OPTION>
<OPTION label='couleur rouge' value='ROUGE'>ROUGE</OPTION>
<OPTION label='couleur verte' value='VERT'>VERT</OPTION>
</SELECTED>

</body>
</html>
18/07/2006, 11h23
SpaceFrog

arf overlib ... l'usine à gaz ...
si tu n'as pas la librairie ça ne risque pas pe marcher ...

en fait overlib passe par le onmouseover du select...

par contre ça m'étonne un peu que l'infobulle s'affiche sur le mouseover de l'option... ce ne serait pas plutot sur la selection de l'option ?
18/07/2006, 11h26
marti

autre exemple avec 2 select différents. L'info bulle du 1er Select est caché par le 2° Select :

<html>
<head>
<SCRIPT src="overlib.js"></SCRIPT>
</head>
<body>
<table>
<tr>
<td>
<SELECT name='14' size='1' style='WIDTH:100px' onMouseOver="return

overlib(document.getElementById('14').options[document.getElementById('14').selectedIndex].label,RIGHT,CLOSECLICK,CAPTION,
'Libellé en entier');" OnMouseOut="nd();" >
<OPTION label='aucune couleur' value='' SELECTED>...</OPTION>
<OPTION label='couleur blancheretertertertetretertertertertertet' value='BLANC'>BLANC</OPTION>
<OPTION label='couleur rouge' value='ROUGE'>ROUGE</OPTION>
<OPTION label='couleur verte' value='VERT'>VERT</OPTION>
</SELECTED>
</td>
</tr>
<tr>
<td>
<SELECT name='15' size='1' style='WIDTH:100px' onMouseOver="return

overlib(document.getElementById('15').options[document.getElementById('15').selectedIndex].label,RIGHT,CLOSECLICK,CAPTION,
'Libellé en entier');" OnMouseOut="nd();" >
<OPTION label='aucune couleur' value='' SELECTED>...</OPTION>
<OPTION label='couleur blancheretertertertetretertertertertertet' value='BLANC'>BLANC</OPTION>
<OPTION label='couleur rouge' value='ROUGE'>ROUGE</OPTION>
<OPTION label='couleur verte' value='VERT'>VERT</OPTION>
</SELECTED>
</td>
</tr<
</table>

</body>
</html>