Sinon en plus compliqué j'ai trouvé ça (recherche sur Google !) :
<HTML>
<HEAD>
<TITLE>Tout JavaScript.com - Info Bulle DHTML</TITLE>
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
//D'autres scripts sur http://www.toutjavascript.com
//Si vous utilisez ce script, merci de m'avertir ! < <voir adresse mail sur site> >
//Auteur original :Olivier Hondermarck <<voir adresse mail sur site>>
//Modifs compatibilité Netscape 6/Mozilla : Cédric Lamalle 09/2001 <cedric@cpac.embrapa.br>
//Correction Mac IE5 (Merci Fred)
var IB=new Object;
var posX=0;posY=0;
var xOffset=10;yOffset=10;
function AffBulle(texte) {
contenu="<TABLE border=0 cellspacing=0 cellpadding="+IB.NbPixel+"><TR bgcolor='"+IB.ColContour+"'><TD><TABLE border=0 cellpadding=2 cellspacing=0 bgcolor='"+IB.ColFond+"'><TR><TD><FONT size='-1' face='arial' color='"+IB.ColTexte+"'>"+texte+"</FONT></TD></TR></TABLE></TD></TR></TABLE> ";
var finalPosX=posX-xOffset;
if (finalPosX<0) finalPosX=0;
if (document.layers) {
document.layers["bulle"].document.write(contenu);
document.layers["bulle"].document.close();
document.layers["bulle"].top=posY+yOffset;
document.layers["bulle"].left=finalPosX;
document.layers["bulle"].visibility="show";}
if (document.all) {
//var f=window.event;
//doc=document.body.scrollTop;
bulle.innerHTML=contenu;
document.all["bulle"].style.top=posY+yOffset;
document.all["bulle"].style.left=finalPosX;//f.x-xOffset;
document.all["bulle"].style.visibility="visible";
}
//modif CL 09/2001 - NS6 : celui-ci ne supporte plus document.layers mais document.getElementById
else if (document.getElementById) {
document.getElementById("bulle").innerHTML=contenu;
document.getElementById("bulle").style.top=posY+yOffset;
document.getElementById("bulle").style.left=finalPosX;
document.getElementById("bulle").style.visibility="visible";
}
}
function getMousePos(e) {
if (document.all) {
posX=event.x+document.body.scrollLeft; //modifs CL 09/2001 - IE : regrouper l'évènement
posY=event.y+document.body.scrollTop;
}
else {
posX=e.pageX; //modifs CL 09/2001 - NS6 : celui-ci ne supporte pas e.x et e.y
posY=e.pageY;
}
}
function HideBulle() {
if (document.layers) {document.layers["bulle"].visibility="hide";}
if (document.all) {document.all["bulle"].style.visibility="hidden";}
else if (document.getElementById){document.getElementById("bulle").style.visibility="hidden";}
}
function InitBulle(ColTexte,ColFond,ColContour,NbPixel) {
IB.ColTexte=ColTexte;IB.ColFond=ColFond;IB.ColContour=ColContour;IB.NbPixel=NbPixel;
if (document.layers) {
window.captureEvents(Event.MOUSEMOVE);window.onMouseMove=getMousePos;
document.write("<LAYER name='bulle' top=0 left=0 visibility='hide'></LAYER>");
}
if (document.all) {
document.write("<DIV id='bulle' style='position:absolute;top:0;left:0;visibility:hidden'></DIV>");
document.onmousemove=getMousePos;
}
//modif CL 09/2001 - NS6 : celui-ci ne supporte plus document.layers mais document.getElementById
else if (document.getElementById) {
document.onmousemove=getMousePos;
document.write("<DIV id='bulle' style='position:absolute;top:0;left:0;visibility:hidden'></DIV>");
}
}
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF" text="#FFFFFF" alink="#000066" link="#000066" vlink="#000066" >
<FONT FACE="Arial" SIZE='-1' COLOR="#000099">
<CENTER><BIG>Script pour afficher des infos bulle personnalisées.</BIG></CENTER>
Les infos bulle se présentent sous la forme de cadre, dont les couleurs de texte, de fond, de contour ainsi que l'épaisseur du contour sont paramétrables.<BR>
Les infos bulle apparaissent à l'endroit du curseur de souris et peuvent contenir tous les éléments HTML classiques (image, tableaux, ...). Elles disparaissent dès que la souris quitte le lien.<BR>
Ce script d'infobulle est compatible Internet Explorer 4+ et Netscape 4+<BR><BR>
<!-- appel à l'initialisation des infos bulles (laisser dans le BODY) -->
<SCRIPT language="JavaScript">InitBulle("navy","#FFCC66","orange",1);
// InitBulle(couleur de texte, couleur de fond, couleur de contour taille contour)
</SCRIPT>
<!-- Déclaration des liens avec les fonctions d'affichage des infos bulle : simple non ? -->
<!-- REM : pour afficher une apostrophe ', écrivez \', idem avec les " -->
<A href="#" onMouseOver="AffBulle('Info bulle du premier lien')" onMouseOut="HideBulle()">Premier Lien ----------------------------------------------------</A><BR>
<A href="#" onMouseOver="AffBulle('Ce script permet d\'afficher des infos bulles très <BIG>simplement</BIG>,<BR> sur <I>plusieurs</I> lignes,<BR>avec des éléments HTML. ')" onMouseOut="HideBulle()">Deuxieme Lien</A><BR>
<A href="#" onMouseOver="AffBulle('Autant d\'infos bulles que vous voulez ...')" onMouseOut="HideBulle()">Autre Lien</A>
<BR><BR>
<CENTER>
<A href="http://www.toutjavascript.com" onMouseOver="AffBulle('ToutJavaScript.com c\'est :<LI>des dizaines de javascripts,<LI>des conseils,<LI>des liens.<BR><CENTER><B>Et bien plus encore...</B><BR><IMG src=\'http://www.toutjavascript.com/gif/animtjs.gif\' width=100 height=30></CENTER>')" onMouseOut="HideBulle()">www.ToutJavaScript.com</A>
</CENTER>
<BR>
<BR><SMALL>Les liens sont inactifs (sauf le lien vers le site ToutJavaScript.com)</A>
</FONT></BODY></HTML>
<!-- Script développé par Olivier Hondermarck <voir adresse mail sur site> -->
<!-- D'autres scripts et des conseils sur http://www.toutjavascript.com -->
Affichage texte vertical html