Infobulle javascript

Infobulle javascript - HTML/CSS - Programmation

Marsh Posté le 28-08-2003 à 14:50:19    

Hello,
J'ai trouvé un script Javascript pour permettre de faire une infobulle personnalisable (script qui me convient parfaitement).
Le problème, c'est qu'il ne fonctionne pas sous Internet Explorer mais parfaitement sous Mozilla (ça commence a devenir une habitude avec moi :D ).  
L'erreur renvoyée par IE est:
"Bibliothèque non Inscrite"
Je vous donne le code :D
 
fichier bulle.js

Code :
  1. //Couleur d'arrière-plan principale
  2. //Généralement une couleur claire (blanc, jaune,etc)
  3.   if (typeof fcolor == 'undefined') { var fcolor = "#333333";}
  4.  
  5. //Couleur du bord et du titre (caption)
  6. //Généralement une couleur foncée (noir, bleu marine,etc)
  7.   if (typeof backcolor == 'undefined') { var backcolor = "#606060";}
  8.  
  9. //Couleur du texte de l'infobulle
  10. //Généralement une couleur foncée
  11.   if (typeof textcolor == 'undefined') { var textcolor = "#FFFFFF";}
  12. //Epaisseur du bord en pixels  
  13. //Généralement entre 1 et 3  
  14.   if (typeof border == 'undefined') { var border = "1";}
  15.  
  16. //Retrait horizontal en pixels de l'infobulle par rapport au curseur
  17. //Généralement entre 3 et 12  
  18.   if (typeof offsetx == 'undefined') { var offsetx = 10;}
  19.  
  20. //Retrait vertical en pixels de l'infobulle par rapport au curseur
  21. //Généralement entre 3 et 12
  22.   if (typeof offsety == 'undefined') { var offsety = 10;}
  23. var ns6 = document.getElementById && !document.all;
  24. var ie4 = document.all;
  25. if(ns6) bulle = document.getElementById("bulle_div" );
  26. else if(ie4) bulle = document.all["bulle_div"];
  27.   function bouge_bulle(e)
  28.   {
  29.     if(ie4)
  30.     {
  31.      x=event.clientX+offsetx+document.body.scrollLeft;
  32.      y=event.clientY+offsety+document.body.scrollTop;
  33.     }
  34.     else if(ns6)
  35.     {
  36.      x=e.pageX+offsetx;
  37.      y=e.pageY+offsety;
  38.     }
  39.    
  40.    bulle.style.left=x;
  41.    bulle.style.top=y;
  42.   }
  43. function fadein_bulle()
  44. {
  45. if( bulle.filters.alpha.opacity<100) bulle.filters.alpha.opacity+=10
  46. else clearInterval(fadein_bulle_int)
  47. }
  48. function fadeout_bulle()
  49. {
  50. if( bulle.filters.alpha.opacity>0) bulle.filters.alpha.opacity-=10
  51. else
  52. {
  53.   bulle.filters.alpha.opacity=0
  54.   clearInterval(fadeout_bulle_int)
  55. }
  56. }
  57.   function afficher_bulle(text)
  58.   {
  59.    if(ie4) bulle.filters.alpha.opacity=0 ;
  60.     txt = "<TABLE  BORDER=0 CELLPADDING="+border+" CELLSPACING=0 BGCOLOR=\""+backcolor+"\"><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR=\""+fcolor+"\"><TR><TD><FONT FACE=\"Arial,Helvetica\" COLOR=\""+textcolor+"\" SIZE=\"-2\">"+text+"</FONT></TD></TR></TABLE></TD></TR></TABLE>";
  61.    bulle.innerHTML = txt;
  62.    bulle.style.visibility = "visible"
  63.    if(ie4) fadein_bulle_int=setInterval("fadein_bulle()",1)
  64.   }
  65.   function cacher_bulle()
  66.   {
  67.    bulle.visibility="hidden";
  68.   // fadeout_bulle_int=setInterval("fadeout_bulle()",2);
  69.    if(ie4) bulle.filters.alpha.opacity=0
  70.    bulle.innerHTML = "";
  71.   }


 
Et dans le fichier HTML:

Code :
  1. <DIV ID="bulle_div" STYLE="position:absolute;visibility:hidden;filter:alpha(opacity=100);z-index:3;">
  2. </div>
  3. <script language="JavaScript" src="./bulle.js"></script>
  4. <SCRIPT LANGUAGE="JavaScript">
  5. <!--
  6. document.onmousemove = mouseMove ;
  7. function mouseMove(e)
  8. {
  9.   bouge_bulle(e);
  10.   //Si on utilise aussi les fenetres déplacables par exemple.
  11.   //bouge_fenetre(e);
  12.   //  Autres fonctions possibles si d'autres scripts
  13. }
  14. -->
  15. </script>


 
Etant totalement nul en Javascript, j'ai pensé que vous pourriez m'aider :D
Merci d'avance


Message édité par Kt-Redfox le 28-08-2003 à 15:01:09
Reply

Marsh Posté le 28-08-2003 à 14:50:19   

Reply

Marsh Posté le 28-08-2003 à 16:44:50    

up  :D

Reply

Marsh Posté le 30-08-2003 à 14:52:30    


dernier up promis :jap:
Pitié :'(

Reply

Marsh Posté le 30-08-2003 à 16:59:23    

Reply

Marsh Posté le 30-08-2003 à 18:54:52    


merci beaucoup, avec ton code, ca marche nickel :jap:
mon sauveur :love:  [:ddr555]

Reply

Marsh Posté le 30-08-2003 à 18:59:09    

Reply

Marsh Posté le 30-08-2003 à 19:47:57    

Elles sont plutôt cool tes infos-bulles :)


Message édité par greut le 30-08-2003 à 19:48:25
Reply

Marsh Posté le 30-08-2003 à 19:49:04    

Reply

Sujets relatifs:

Leave a Replay

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