Lors du survol d'un élément ou d'une zone, une infos-bulle apparaît, suivant les mouvements du pointeur sans effet de clignotement. La bulle disparait lorsque l'on s'éloigne de l'élément.
Le texte et la couleur de fond de la bulle sont paramétrables à la volée, la bordure de la bulle en dur. Il est tout à fait possible d'inclure du code HTML dans le texte de la bulle.
Source / Exemple :
//Définition de variables en fonction du navigateur
var ie = (document.all)? true:false;
var ns4 = (document.layers)? true:false;
var ns6 = (document.getElementById)? true:false;
//Incrustation du div "bulle" (display: none = non affiché)
//Vous pouvez librement modifier le style de bordure de la bulle
if ((ns6) || (ie)) {
document.write('<div id="bulle" style="position:absolute; top: 0; left: 0; border: 3px solid #111; padding: 9px; display: none;"></div>');
} else if (ns4) {
document.write('<layer id="bulle" top=0 left=0></layer>');
}
if(ns6) {
var bulle = document.getElementById('bulle');
}
else if(ie) {
var bulle = document.all['bulle'];
}
else {
var bulle = document.layers['bulle'];
}
var bulleStyle = bulle.style;
//Fonction d'affichage de la bulle
function afficher_bulle(texte, couleur, event) {
//Lignes utiles si vous imbriquez des éléments devant supporter des bulles
if(ie) {
window.event.cancelBubble = true;
}
else {
event.stopPropagation();
}
bulle.innerHTML = texte;
bulleStyle.backgroundColor = couleur;
//On suit les mouvements de la souris
if(ie) {
bulle_mouseMove();
}
else {
bulle_mouseMove(Event);
}
document.onmousemove = bulle_mouseMove;
bulleStyle.display = 'block';
}
//Fonction de positionnement de la bulle en fonction des mouvements du curseur
function bulle_mouseMove(e) {
if(ie) {
//Prend en compte le scroll de la page
if(document.documentElement.clientWidth>0) {
bulle_x = event.x + document.documentElement.scrollLeft;
bulle_y = event.y + document.documentElement.scrollTop;
}
else {
bulle_x = event.x + document.body.scrollLeft;
bulle_y = event.y + document.body.scrollTop;
}
}
else {
bulle_x = e.pageX;
bulle_y = e.pageY;
}
if(!isNaN(bulle_x) && !isNaN(bulle_y)) {
bulle_x += 5;
bulle_y -= 25;
bulleStyle.left = bulle_x + 'px';
bulleStyle.top = bulle_y + 'px';
}
}
//Fonction qui fait disparaître la bulle
function masquer_bulle() {
document.onmousemove = null;
bulleStyle.display = 'none';
}
//Fonctions qui augmente le z-index (indice de profondeur) de la bulle
function up_zindex_bulle() {
bulleStyle.zIndex = 200;
}
//Réinitialise le z-index
function raz_zindex_bulle() {
bulleStyle.zIndex = '';
}
Conclusion :
J'ai cherché un moment un tel script sans trouver chaussure à mon pied, ou plutôt aux pieds de mon application :-)
J'ai donc décidé de coder mon propre script généraliste d'infos-bulles, désormais à votre disposition, enjoy ^^
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.