Infobulles, FIREFOX et élément SELECT

Version imprimable

Bonjour j'utilise actuellement des infobulles (balise div gérée par CSS et controlée par des appels Javascript ex: onMouseOver ou onMouseOut).

Tout mon toutim marche nickel sauf lorsque je veux faire apparaitre ma bulle sur un élément <Option> d'un <select>. A ce moment là ma bulle apparait tout en haut de l'écran et plus sous la souris.

Je vous pose ici le javascript utilisé pour déterminer la position :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 if (navigator.appName!="Microsoft Internet Explorer") { // Si on est pas sous IE GetId("curseur").style.left=e.pageX + 5+"px"; GetId("curseur").style.top=e.pageY + 10+"px"; } else { if(document.documentElement.clientWidth>0) { GetId("curseur").style.left=20+event.x+document.documentElement.scrollLeft+"px"; GetId("curseur").style.top=10+event.y+document.documentElement.scrollTop+"px"; } else { GetId("curseur").style.left=20+event.x+document.body.scrollLeft+"px"; GetId("curseur").style.top=10+event.y+document.body.scrollTop+"px"; } }
Ici le CSS
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 .infobulle{ position: absolute; visibility : hidden; border: 1px solid Black; padding: 10px; font-family: Verdana, Arial; font-size: 10px; background-color: #FFFFCC; color: #000000; border: Solid 1px; zIndex: 1000; }
Et là l'appel HTML
Code:

1 2 3 4 5 6 7 8 9 10 11 <select name="cabinet_courtier_s" class="login_input" id="cabinet_courtier_s" style="width: 220px;" onChange="javascript:Remplir(this.form, 'cabinet_courtier_s');"> <option value='0'>-- Choississez un cabinet d'assurance --</option> <?php foreach ($tab_cabinet_courtier as $value) { echo "<option value='".$value."'"; if ($cabinet_courtier_s == $value || $cabinet_courtier_i == $value) { echo "selected=selected'"; } echo "onMouseOver=\"montre('$texte');\" onMouseOut=\"cache();\">".$value."</option>"; } ?> </select>
Voilà j'ai écumé les forums j'ai vu qu'il y avait incompatibilité avec IE6 il me semble mais le problème portait sur le "zIndex" dans le CSS. Et pour la position du curseur je ne trouve rien du tout.
Je reprécise tout de même que ce code fonctionne sur IE et Firefox pour tous les éléments qui ne sont pas des <select><option>.

Merci d'avance,

16/10/2007, 09h56
didou518

Ok j'ai trouvé une solution acceptable.

En revanche ma bulle s'affiche "sous" le SELECT.
Je précise que je fais mes tests sous Firefox et non IE.
J'ai pourtant mis un zIndex élevé sur la bulle ça ne suffit pas ?
16/10/2007, 10h14
didou518

Toujours pas de solutions... j'opte pour afficher ma bulle sur le coté droit du select.
16/10/2007, 10h51
onirisme

Merci de donner un exemple avec le code généré par php...
Du html du css et le javascript... ou encore mieux une adresse pour visionner la page en ligne.
On y verra plus clair 8O

Code généré :

Code:

1
2
3
4
5
6
7
8
9
<select name="cabinet_courtier_s" class="login_input" id="cabinet_courtier_s" style="width: 220px;" onChange="javascript:Remplir(this.form, 'cabinet_courtier_s');">
<option value='0'>-- Choississez un cabinet d'assurance --</option>
<option value='ASSURANCE DUPONT'onMouseOver="montre('Lieu du sinistre');" onMouseOut="cache();">ASSURANCE DUPONT</option>
<option value='AXA'onMouseOver="montre('Lieu du sinistre');" onMouseOut="cache();">AXA</option>
<option value='axa brun'onMouseOver="montre('Lieu du sinistre');" onMouseOut="cache();">axa brun</option>
<option value='bassano'onMouseOver="montre('Lieu du sinistre');" onMouseOut="cache();">bassano</option>
<option value='shoter'onMouseOver="montre('Lieu du sinistre');" onMouseOut="cache();">shoter</option>
<option value='texa'onMouseOver="montre('Lieu du sinistre');" onMouseOut="cache();">texa</option>
</select>

Le HTML est au dessus, le CSS aussi.

Pour le Javascript je vous donne tout le fichier :

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
 
function ObjGetPos(obj_){
	  var PosX = 0;
	  var PosY = 0;
	  var Obj  =  obj_;
	  //-- Si l'objet existe
	  if( Obj){
	    //-- Si propriété existe
	    if( Obj.offsetParent){
	      //-- Récup. Position Objet
	      PosX = Obj.offsetLeft;
	      PosY = Obj.offsetTop;
	      //-- Tant qu'un parent existe
	      while( Obj = Obj.offsetParent){
	        //-- Ajout position Parent
	        PosX += Obj.offsetLeft;
	        PosY += Obj.offsetTop;
	      }
	    }
	  }
	  //-- Retour des positions
	  return([PosX, PosY]);
	}
 
 //-- 15.09.2006 ------------------------
 // Ajout Fonction Add_Event
 //--------------------------------------
function Add_Event( obj_, event_, func_, mode_){
	if( obj_.addEventListener)
		obj_.addEventListener( event_, func_, mode_? mode_:false);
	else
	obj_.attachEvent( 'on'+event_, func_);
}
 
 //-- 15.09.2006 ------------------------
 // Utilisation de Add_Event
 //--------------------------------------
function Init_Bulle(){
	//-- Pour les SELECT on supprime l'événement hérite
	var Obj = document.body.getElementsByTagName('SELECT');
	 if( Obj && Obj.length){
		 for(var i=0; i < Obj.length; i++){
			if( Obj[i].size == 1){
				 for(var k=0; k < Obj[i].options.length; k++){
					 Add_Event( Obj[i].options[k], 'mousemove', cache);
				 }
			}
			Add_Event( Obj[i], 'mousedown', cache);
			Add_Event( Obj[i], 'scroll', cache);
		}
	}
}
 
	function GetId(id){
		return document.getElementById(id);
	}
 
	var bulle_visible=false; // La variable i nous dit si la bulle est visible ou non
 
	function move(e) {
	  if(bulle_visible){
	    if (navigator.appName!="Microsoft Internet Explorer") { // Si on est pas sous IE
	    		if(e.target.tagName == "OPTION"){
	    			var Pos =new Array();
					Pos = ObjGetPos(e.target);
	    			GetId("curseur").style.left=Pos[0]+ e.target.offsetWidth+ 5+"px";
			    	GetId("curseur").style.top=Pos[1]+ 10+"px";
	    		}else{
			    	GetId("curseur").style.left=e.pageX + 5+"px";
			    	GetId("curseur").style.top=e.pageY + 10+"px";
		    	}
	    }
	    else {
	    	var X = event.x;
		    var Y = event.y;
		    var name="curseur";
	    	if(event.srcElement.tagName == "OPTION"){
	    			var Pos =new Array();
					Pos = ObjGetPos(event.target);
	    			X=Pos[0]+ event.target.offsetWidth;
			    	Y=Pos[1];
    		}
		    if(document.documentElement.clientWidth>0) {
 
					GetId(name).style.left=20+X+document.documentElement.scrollLeft+"px";
					GetId(name).style.top=10+Y+document.documentElement.scrollTop+"px";
		    }
		    else {
					GetId(name).style.left=20+X+document.body.scrollLeft+"px";
					GetId(name).style.top=10+Y+document.body.scrollTop+"px";
		    }
	    }
	  }
	}
 
	function montre(text) {
	  Init_Bulle();
	  if(bulle_visible==false) {
	  	GetId("curseur").style.visibility="visible"; // Si il est cacher (la verif n'est qu'une securité) on le rend visible.
	  	GetId("curseur").innerHTML = text; // on copie notre texte dans l'élément html
	  	if (navigator.appName=="Microsoft Internet Explorer") GetId("curseur").style.width = "250px";
	  	else GetId("curseur").style.width = GetId("curseur").offsetWidth;
	  	bulle_visible=true;
	  }
	}
	function cache() {
		if(bulle_visible==true) {
			GetId("curseur").style.visibility="hidden"; // Si la bulle est visible on la cache
			GetId("curseur").style.width = '';
			bulle_visible=false;
		}
	}
	document.onmousemove=move; // des que la souris bouge, on appelle la fonction move pour mettre a jour la position de la bulle.

Je sais que le if(event.srcElement.tagName == "OPTION"){ est faux dans la fonction move mais je ne sais pas quel attribut utiliser.
Enfin dans tous les cas maintenant j'ai le tout qui fonctionne sauf sur le SELECT sous IE(v7) où là carrément rien n'apparait même pas une bulle mal placée.

Petit oubli dans le code HTML il faut bien sur le code pour la bulle :
<div id="curseur" class="infobulle"></div>

Et merci de la réponse rapide :king:

16/10/2007, 12h50
onirisme

Perso, je ne vois pas, je ne suis pas persuadé que ce soit un problème de css.
Je ne comprend pas pourquoi ie7 ne l'affiche pas...
Si quelqu'un à une idée...
16/10/2007, 14h33
didou518

Après écumage (encore ^^) de google, il apparaitrait que IE7 ne gère pas du tout l'évènement onmouseover sur les <option>. => Info à confirmer car je ne sais pas où trouver les specs d'IE7 concernant le Javascript...

Des solutions sont proposées pour remplacer le select par des <ul> <li> voire des <div> imbriqués mais cette solution ne me parait pas abordable dans mon cas car déjà beaucoup de Select ont été codés par mes prédécésseurs et je me vois mal tout reprendre (surtout que j'ai des impératifs de temps).