Outils et ressources pour site web
Les javascripts

Infobulle sur lien

DESCRIPTION :

Une infobulle colorée au survol d'un lien .

EXEMPLE :

> Voir l'exemple

COMMENTAIRES :

Vous pouvez changer toutes les couleurs et inclure du HTML .

Attention aux signes dans les textes : ' s'écrit \'
Idem pour mettre une image : <IMG src = \' votre image.jpg \'........>

Il est également possible de changer la position de l'infobulle
par rapport au lien en modifiant ces variables dans le< head> :
var xOffset=10;yOffset=10;
x = position horizontale vers la gauche ( vers la droite , mettre - )
y = position verticale vers le bas ( vers le haut , mettre - )

CODE DU SCRIPT

-Insérer entre les balises <HEAD> et </HEAD> :

<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) {
//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>

-Insérer entre les balises <BODY> et </BODY> :

-Insérer entre les balises <BODY> et </BODY>
pour chaque lien :

Haut de la page

visiteurs depuis le : 02-04-2002 - Actuellement sur le site :

ACCUEIL

La construction du Mandragore 2

Les plans

L'histoire du Mandragore 1

Jonques et gréement de jonque

Projets

Utilisation et futures croisières du bateau

Encyclopédie de la mer

Le bois

Pavillonnerie

La construction amateur

Liens

Livre d'Or

Référencement

Nos bannières

Webmasters

Le site