Communauté
Espace membre
Création Web
Tutoriaux
Services
Bookmark and Share
Sponsors
Statistiques
Nb connectés : 23
Nb membres : 233
Nb visiteurs :
Nb hits : 10042
Vous êtes ici : Accueil > Javascript > Navigation > InfoBulle

Trouver une ressource
Trouvez une ressource parmi les 67 tutoriaux, 72 messages d'aide etc...
Lancer une recherche :

Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

InfoBulle
Information sur le tutoriel/la source
Visuel non disponible
InfoBulle
Catégorie : Navigation
Niveau : Initié
Auteur : Webmaster
Publication : le 15/06/2009 à 22:37:46
Note : Aucune note/5 (0 vote)

Bookmark and Share
Etape 1 : Placez ce code entre les balises <head></head> de votre page :

Code :
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
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>&nbsp;";
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) {
bulle.innerHTML=contenu;
document.all["bulle"].style.top=posY+yOffset;
document.all["bulle"].style.left=finalPosX;
document.all["bulle"].style.visibility="visible";
}
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;
posY=event.y+document.body.scrollTop;
}
else {
posX=e.pageX;
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;
}
else if (document.getElementById) {
document.onmousemove=getMousePos;
document.write("<DIV id='bulle' style='position:absolute;top:0;left:0;visibility:hidden'></DIV>");
}

}
</SCRIPT>


Etape 2 : Placez ce code entre les balises <body></body> de votre page :

Code :
<SCRIPT language="JavaScript">InitBulle("#333333","#CCCCCC","#666666",1);
//(couleur de texte, couleur de fond, couleur de contour taille contour)
</SCRIPT>
<A href="#" onMouseOver="AffBulle('<b>Infobulle :</b><br>Et voici une jolie infobulle !')" onMouseOut="HideBulle()">Passez le curseur ici !</A><BR>


Et voilà une jolie infobulle !

Les commentaires
Il y a 0 commentaire(s) déjà posté(s)

Merci de bien vouloir nous donner votre avis sur ce tutoriel !
[ Pour cela vous devez être connecté avec votre compte ]