Infobulle javascript

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 ).
L'erreur renvoyée par IE est:
"Bibliothèque non Inscrite"
Je vous donne le code

fichier bulle.js

Code :

//Couleur d'arrière-plan principale
//Généralement une couleur claire (blanc, jaune,etc)
if (typeof fcolor == 'undefined') { var fcolor = "#333333";}
//Couleur du bord et du titre (caption)
//Généralement une couleur foncée (noir, bleu marine,etc)
if (typeof backcolor == 'undefined') { var backcolor = "#606060";}
//Couleur du texte de l'infobulle
//Généralement une couleur foncée
if (typeof textcolor == 'undefined') { var textcolor = "#FFFFFF";}
//Epaisseur du bord en pixels
//Généralement entre 1 et 3
if (typeof border == 'undefined') { var border = "1";}
//Retrait horizontal en pixels de l'infobulle par rapport au curseur
//Généralement entre 3 et 12
if (typeof offsetx == 'undefined') { var offsetx = 10;}
//Retrait vertical en pixels de l'infobulle par rapport au curseur
//Généralement entre 3 et 12
if (typeof offsety == 'undefined') { var offsety = 10;}
var ns6 = document.getElementById && !document.all;
var ie4 = document.all;
if(ns6) bulle = document.getElementById("bulle_div" );
else if(ie4) bulle = document.all["bulle_div"];
function bouge_bulle(e)
{
if(ie4)
{
x=event.clientX+offsetx+document.body.scrollLeft;
y=event.clientY+offsety+document.body.scrollTop;
}
else if(ns6)
{
x=e.pageX+offsetx;
y=e.pageY+offsety;
}
bulle.style.left=x;
bulle.style.top=y;
}
function fadein_bulle()
{
if( bulle.filters.alpha.opacity<100) bulle.filters.alpha.opacity+=10
else clearInterval(fadein_bulle_int)
}
function fadeout_bulle()
{
if( bulle.filters.alpha.opacity>0) bulle.filters.alpha.opacity-=10
else
{
bulle.filters.alpha.opacity=0
clearInterval(fadeout_bulle_int)
}
}
function afficher_bulle(text)
{
if(ie4) bulle.filters.alpha.opacity=0 ;
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>";
bulle.innerHTML = txt;
bulle.style.visibility = "visible"
if(ie4) fadein_bulle_int=setInterval("fadein_bulle()",1)
}
function cacher_bulle()
{
bulle.visibility="hidden";
// fadeout_bulle_int=setInterval("fadeout_bulle()",2);
if(ie4) bulle.filters.alpha.opacity=0
bulle.innerHTML = "";
}

Et dans le fichier HTML:

Code :

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