info bulle sur un Select

Version imprimable

Voir 40 message(s) de cette discussion en une page

18/07/2006, 11h39
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, 11h41
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, 11h48
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, 11h51
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, 11h57
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, 12h14
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, 12h22
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, 12h23
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, 12h26
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>

Voir 40 message(s) de cette discussion en une page