info bulle sur un Select

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

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

**linar009** · 18/07/2006, 10h41

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

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

je ne juge pas ...
du point de vue ergonomique ça peut avoir un intéret de donner une explication sur un choix ...

**linar009** · 18/07/2006, 10h51

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.

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

Code :

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

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 ???

**linar009** · 18/07/2006, 11h10

Code :

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

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

**linar009** · 18/07/2006, 11h14

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

**marti** · 18/07/2006, 11h22

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>

**SpaceFrog** · 18/07/2006, 11h23

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 ?

**marti** · 18/07/2006, 11h26

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>

info bulle sur un Select

JavaScript

Discussions similaires

Partager

Partager