Archives pour l'étiquette infobulle

Ajax et infobulle

Ben voilà … nouvelle article sur l’ajax, une petite astuce pour notifier le visiteur d’événement survenue avec ajax. La plupart du temps en ajax on privilégie une zone sur l’écran, au centre, tout en haut, tout en bas.

J’expérimente depuis quelque temps déjà, une autre zone, qui est elle aussi assez souvent bien vue par l’utilisateur … a coté du pointeur de la souris :

Le pointeur de la souris est manquant … mais faut l’imaginer quoi :p

Donc voila le code :

Le CSS dont on a besoin :

#infobulle {
    background-color:white;
    border:1px solid #CCCCCC;
    font-family:Verdana,Arial;
    font-size:0.7em;
    padding:10px;
    position:fixed;
    visibility:hidden;
}

Le code Javascript :

var timeOUTaffBulle=null;
var bubble = document.getElementById("infobulle");
var cursor_padding = 5;
var nav = navigator.appName;
var ie = document.all;
var ns = document.layers;
if(!ie)
 document.captureEvents(Event.MOUSEMOVE);

document.onmousemove = get_mouse;

function get_mouse(e){
 if(ie){
 x = event.x;
 y = event.y;
 window.status = x;
 }else{
 x = e.pageX;
 y = e.pageY;
 }

 bubble = document.getElementById("infobulle");
 bubble.style.left = x + cursor_padding+'px';
 bubble.style.top = y - document.documentElement.scrollTop + cursor_padding+'px';
}

document.onmousemove = get_mouse;

// affiche la bubble
function see_bubble(text){
 bubble.style.visibility = "visible";
 bubble.style.display = "block";
 if(timeOUTaffBulle!=null)
 bubble.innerHTML+="
"+text;
 else
 bubble.innerHTML = text;
}

function affBulle(text)
{
 see_bubble(text)
 timeOUTaffBulle=setTimeout("kill_bubble()",1800)
}

function kill_bubble(){
 bubble.style.visibility = "hidden";
 bubble.style.display = "none";
 if(timeOUTaffBulle!=null)
 {
 clearTimeout(timeOUTaffBulle);
 timeOUTaffBulle=null;
 }
}
/*FIN INFOBULLE*/

Donc voila … il suffit juste de mettre une div avec comme id « infobulle » et d’appeler la fonction : affBulle(‘Salut à vous …’);
Pour afficher une superbe infobulle à côté de votre souris.