! /!\ Ce tutoriel est obselete, nouvelle version ici ! /!\ ! Merci.

Aujourd'hui j'vous fait un javascript qui va être charger d'afficher une info-bulle (personnalisable bien sur) au passage du curseur de la souris, sur n'importe qu'elle élément HTML de votre page.

Pour ce faire, on a besoin :

  • D'un script de détection de la position du curseur,
  • D'un script permettant d'afficher et de cacher la bulle,
  • D'un script permettant d'afficher un texte variable dans la bulle,
  • D'un CSS définissant le style de la bulle,
  • Un div vide.

Pour ce script, il y avait selon moi UNE difficulté, un bug d'Internet Explorer.
Lors d'un scroll de page, la position du curseur donné par Javascript n'etais plus à jour par rapport au scroll, la bulle n'est alors plus en phase avec la souris.
Pour contrer ce problème, une solution, détecter le navigateur et ajouter cette ligne à la position verticale :
document.body.scrollTop; . Voila un probléme de résolu.

Pour afficher et cacher la bulle, on va utiliser les deux évènements onmouseout et onmouseover tout simplement, chacun appelant une fonction différente.

Pour que le texte de la bulle change suivant sa position dans la page, il faut lui passer le texte au moment ou nous voulons afficher la bulle. Il faut aussi qu'a cette instant, le texte s'y écrive instantanément. Pour cela, nous allons passer le texte de cette maniere : onmouseover="montre('TEXTE');" et se servir de la fonction javascript suivante innerHTML pour écrire le texte.

Niveau CSS restons sobre le stric minimum est une couleur et une bordure.

Bon aller, je continue les commentaires dans la source du code ;)

geshi javascript
<script language="javascript" type="text/javascript">
<!--
function GetId(id)
{
return document.getElementById(id);
}
var i=false; // La variable i nous dit si la bulle est visible ou non

function move(e) {
  if(i) {  // Si la bulle est visible, on calcul en temps reel sa position ideale
    if (navigator.appName!="Microsoft Internet Explorer") { // Si on est pas sous IE
    GetId("curseur").style.left=e.pageX + 5+"px";
    GetId("curseur").style.top=e.pageY + 10+"px";
    }
    else { // Modif proposé par TeDeum, merci à lui
    if(document.documentElement.clientWidth>0) {
	GetId("curseur").style.left=20+event.x+document.documentElement.scrollLeft+"px";
	GetId("curseur").style.top=10+event.y+document.documentElement.scrollTop+"px";
    } else {
	GetId("curseur").style.left=20+event.x+document.body.scrollLeft+"px";
	GetId("curseur").style.top=10+event.y+document.body.scrollTop+"px";
	     }
    }
  }
}

function montre(text) {
  if(i==false) {
  GetId("curseur").style.visibility="visible"; // Si il est cacher (la verif n'est qu'une securité) on le rend visible.
  GetId("curseur").innerHTML = text; // Cette fonction est a améliorer, il parait qu'elle n'est pas valide (mais elle marche)
  i=true;
  }
}
function cache() {
if(i==true) {
GetId("curseur").style.visibility="hidden"; // Si la bulle etais visible on la cache
i=false;
}
}
document.onmousemove=move; // des que la souris bouge, on appelle la fonction move pour mettre a jour la position de la bulle.
//-->
</script>

<div id="curseur" class="infobulle"></div>

geshi css
<style type="text/css">
.infobulle{
	position: absolute;	
	visibility : hidden;
	border: 1px solid Black;
	padding: 10px;
	font-family: Verdana, Arial;
	font-size: 10px;
	background-color: #FFFFCC;
}
</style>

Voila c'est fini :)
Vous pouvez tester ici, il suffit de mettre onmouseover="montre('VOTRE TEXTE');" onmouseout="cache();" sur n'importe quel balise html qui le supporte et c'est fini.

Côté optimisation c'est déjà pas mal (par exemple, on evite de calculer la position du curseur si aucune bulle n'est visible), et côté ergonomie, on pourrais encore l'améliorer, avec pourquoi pas une tempo d'une demi seconde avant d'afficher la bulle, dans le plus pur geek style ^^.

Cette source est déjà déposé sur Code-Source ce n'est donc pas la peine d'aller la déposer a ma place ;)
Voila j'espere qu'elle vous sera utile !

MAJ : Prise en compte du monde couirk d'IE, et du scroll horizontal.