pb de positionnement bulle au survol en javascript

pb de positionnement bulle au survol en javascript - HTML/CSS - Programmation

Marsh Posté le 17-06-2007 à 22:11:23    

Bonjour,  
 
j'aimerais créer une bulle qui s'affiche au survol d'un lien, mais dans Firefox la bulle ne s'affiche pas en-dessous du lien mais tout en haut à gauche de ma page. dans IE je n'ai pas ce problème...  
 
Je ne connais pas grand-chose en javascript, je travaille d'après un script libre que j'ai trouvé sur un site de tutoriels.
 
le code que j'ai utilisé est:
 

Code :
  1. // PARAMETRES MODIFIABLES
  2. var delaiAffBull = 0
  3. var delaiAffStat = 900
  4. var autoEffBull = 900
  5. var delaiEffBull = 2000
  6. var delaiEffStat = 2000
  7. var DecalVertic = 16
  8. var DecalHoriz = 6
  9. var TailleText = 'font-size: 11px'
  10. var PolicText = 'Arial, Verdana'
  11. var CouleurTexte = '#494B5D'
  12. var CouleurFond = '#FDF1B0'
  13. var CouleurBord = '#786654'
  14. var CouleurOmbr = '#000000'
  17. // PARAMETRES A NE PAS MODIFIER
  18. var AffichBull=setTimeout('document.getElementById("infoBull" ).style.visibility = "visible";document.getElementById("ombrBull" ).style.visibility = "visible"',delaiAffBull);
  19. clearTimeout(AffichBull);
  20. var EffacBull=setTimeout('Vt=2;effacem()',delaiEffBull);
  21. clearTimeout(EffacBull);
  22. var EffacAutoBull=setTimeout('Vt=1;effacem();window.status=""',autoEffBull);
  23. clearTimeout(EffacAutoBull);
  24. var tempo=setTimeout('if(Vt==1)Opac=Opac-3;OpacOmbr=OpacOmbr-3;if(Vt==2)Opac=Opac-8;OpacOmbr=OpacOmbr-8;effacem()',Vitess/1000);
  25. clearTimeout(tempo);
  26. var AffStat=setTimeout('window.status=textBull',delaiAffStat);
  27. clearTimeout(AffStat);
  29. // DECLARATIONS
  30. var textBull = ''
  31. var Vitess = 1
  32. var Opac = 100
  33. var OpacOmbr = 20
  34. var Opac_2 = 10
  35. var Opac_2Ombr = .2
  36. var Vt = 0
  37. var EffB = 0
  38. var larg_ecran_B = 0
  39. var haut_ecran_B = 0
  40. var Long = 0
  41. var limiteH = 0
  42. var limiteV = 0
  43. var retourB = 0
  44. var PosHoriz = 0
  45. var PosVertic = 0
  46. var PosBullHoriz = 0
  47. var PosBullVerti = 0
  48. var scrollPag = 0
  49. var limiteBull = 0
  51. var ns4=document.layers?1:0
  52. var ie4=document.all?1:0
  53. var ns6=document.getElementById&&!document.all?1:0
  55. if(navigator.appName.substring(0,3) == "Net" )
  56. document.captureEvents(Event.MOUSEMOVE);
  57. document.onmousemove = get_mouse; // Capture de la position de la souris
  59. function get_mouse(e){ // Transfert de la position de la souris
  60. x = (navigator.appName.substring(0,3) == "Net" ) ? e.pageX : event.x+document.body.scrollLeft;
  61. y = (navigator.appName.substring(0,3) == "Net" ) ? e.pageY : event.y+document.body.scrollTop;
  62. PosBullHoriz = x;
  63. PosBullVerti = y;
  64. }
  66. function affichBulle(Bull){ // Affichage de la bulle
  67. larg_ecran_B = document.body.clientWidth; // Recadrage dans l'écran
  68. haut_ecran_B = document.body.clientHeight;
  69. scrollPag = document.body.scrollTop;
  70. if (ie4)Long = (Bull.length * (60 / 13)) + 26;
  71. if (ns6)Long = (Bull.length * (60 / 13)) + 50; // (50) A adapter selon de la police  
  72. limiteH = PosBullHoriz + Long + DecalHoriz;
  73. limiteV = scrollPag + haut_ecran_B;
  74. retourB = limiteH - larg_ecran_B;
  75. PosHoriz = PosBullHoriz + DecalHoriz;
  76. PosVertic = PosBullVerti + DecalVertic;
  77. limiteBull = PosBullVerti + 30;
  78. if (limiteH > larg_ecran_B)PosHoriz = PosHoriz - retourB;
  79. if (limiteBull > limiteV)PosVertic = PosVertic - 40;
  80. if (Bull == 0){ // Test de la présence du texte
  81. clearTimeout(AffichBull);
  82. clearTimeout(EffacAutoBull);
  83. clearTimeout(AffStat);
  84. EffacBull=setTimeout('Vt=2;effacem()',delaiEffBull);
  85. setTimeout('ChxLien=0',300);
  86. }
  87. else if (Bull != 0){var textBull = Bull; // Récuperation du texte
  88. if (document.getElementById){document.getElementById("infoBull" ).style.visibility = "hidden";document.getElementById("ombrBull" ).style.visibility = "hidden";}
  89. Opac = 100;OpacOmbr = 20
  90. var cadreBull = '<table border="1" cellpadding="0" cellspacing="0"'+ // Cadre de la bulle
  91. ' style="border:1px solid '+CouleurBord+'; border-collapse: collapse; font-family: '+PolicText+'; '+TailleText+'; color: '+CouleurTexte+'; margin-left: 8; filter: alpha(opacity='+Opac+'); -moz-opacity: '+Opac_2+'"><tr><td style="border-style:solid; border-width:1px; margin-left: 8;" bgcolor="'+CouleurFond+'" bordercolor="'+CouleurBord+'" Width=><nobr>&nbsp; '+textBull+' &nbsp;</nobr></td></tr></table>'
  92. var ombreBull = '<table border="0" cellpadding="0" cellspacing="0"'+ // Ombre de la bulle
  93. ' style="border:0px solid '+CouleurBord+'; border-collapse: collapse; font-family: '+PolicText+'; '+TailleText+'; color: '+CouleurTexte+'; margin-left: 8; filter: alpha(opacity='+OpacOmbr+'); -moz-opacity: '+Opac_2Ombr+'"><tr><td style="border-style:solid; border-width:0px; margin-left: 8;" bgcolor="'+CouleurOmbr+'" bordercolor="'+CouleurBord+'" Width=><nobr>&nbsp; '+textBull+'&nbsp;</nobr></td></tr></table>'
  95. if ((document.getElementById) && (document.getElementById("infoBull" ).style.visibility != "visible" )){
  96. document.getElementById("infoBull" ).innerHTML = cadreBull; // Affichage du cadre avec le texte  
  97. document.getElementById("ombrBull" ).innerHTML = ombreBull;
  98. AffichBull=setTimeout('document.getElementById("infoBull" ).style.visibility = "visible";document.getElementById("ombrBull" ).style.visibility = "visible"',delaiAffBull);
  99. document.getElementById("infoBull" ).style.top = PosVertic; // position verticale
  100. document.getElementById("infoBull" ).style.left = PosHoriz; // Position horizontale
  101. document.getElementById("ombrBull" ).style.top = PosVertic + 5; // position verticale
  102. document.getElementById("ombrBull" ).style.left = PosHoriz + 8; // Position horizontale
  103. EffacAutoBull=setTimeout('Vt=1;effacem();window.status=""',autoEffBull);
  104. clearTimeout(EffacBull);
  105. }
  106. }
  107. afftextStat(Bull); // Transfert du texte pour la barre de status
  108. }
  110. function afftextStat(text){ // Affichage du texte de la barre de status
  111. if(text != 0){textBull = text;
  112. AffStat=setTimeout('window.status=textBull',delaiAffStat)}
  113. else {setTimeout("window.status=''",delaiEffStat)}
  114. }
  116. function effacem(){
  117. var cadreBull = '<table border="1" cellpadding="0" cellspacing="0"'+ // Cadre de la bulle
  118. ' style="border:1px solid '+CouleurBord+'; border-collapse: collapse; font-family: '+PolicText+'; '+TailleText+'; color: '+CouleurTexte+'; margin-left: 8; filter: alpha(opacity='+Opac+'); -moz-opacity: '+Opac_2+'"><tr><td style="border-style:solid; border-width:1px; margin-left: 8;" bgcolor="'+CouleurFond+'" bordercolor="'+CouleurBord+'" Width=><nobr>&nbsp; '+textBull+' &nbsp;</nobr></td></tr></table>'
  119. var ombreBull = '<table border="0" cellpadding="0" cellspacing="0"'+ // Ombre de la bulle
  120. ' style="border:0px solid '+CouleurBord+'; border-collapse: collapse; font-family: '+PolicText+'; '+TailleText+'; color: '+CouleurTexte+'; margin-left: 8; filter: alpha(opacity='+OpacOmbr+'); -moz-opacity: '+Opac_2Ombr+'"><tr><td style="border-style:solid; border-width:0px; margin-left: 8;" bgcolor="'+CouleurOmbr+'" bordercolor="'+CouleurBord+'" Width=><nobr>&nbsp; '+textBull+'&nbsp;</nobr></td></tr></table>'
  122. document.getElementById("infoBull" ).innerHTML = cadreBull
  123. document.getElementById("ombrBull" ).innerHTML = ombreBull
  124. if (ie4) tempo=setTimeout('if(Vt==1)Opac=Opac-3;OpacOmbr=OpacOmbr-3;if(Vt==2)Opac=Opac-8;OpacOmbr=OpacOmbr-8;effacem()',Vitess/1000)
  125. else {document.getElementById("infoBull" ).innerHTML = "";document.getElementById("ombrBull" ).innerHTML = "";} // A vous d'adapter l'éffacement en douceur pour Netscape, Firefox, etc...
  126. if (Opac <= 0) {
  127. clearTimeout(tempo)
  128. document.getElementById("infoBull" ).innerHTML = ""
  129. document.getElementById("ombrBull" ).innerHTML = ""
  130. }
  131. }
  133. document.write('<DIV id=infoBull STYLE="position: absolute;z-Index:10"></DIV><DIV id=ombrBull STYLE="position: absolute;z-Index:9"></DIV>')


 
dans un fichier à part, et <div id="mberger">
<h3><a style="cursor:pointer" onMouseOver="affichBulle('Qui je suis...');return(true)" onMouseOut="affichBulle(0)" onClick="affichBulle(0)" href="mberger.html">Mich&egrave;le Berger | Psychologue Industriel</a></h3>
</div> dans ma page Html.  
 
Pourriez-vous m'aider? Où est-ce que je dois changer des paramètres?  
 
Merci!


Message édité par li-li le 18-06-2007 à 13:02:55
Reply

Marsh Posté le 17-06-2007 à 22:11:23   

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed