INFOS BULLE PARAMÉTRABLE (TOUS NAVIGATEURS)

//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 = '';
}

Télécharger le zip

14 février 2008 18:39:37 :

Modification du titre pour une meilleure pertinence

27 mars 2008 16:37:52 :

meilleur referencement de la source

31 mars 2008 09:34:52 :

Nouvelle version du script d'infos-bulle, prise en compte du scroll de la page.

31 mars 2008 15:23:39 :

Modification de la page d'exemple pour une bonne visualisation sous Internet Explorer. Ajout de fonctions pour manipuler la "profondeur" de la bulle (si celle-ci se place "derrière" un autre élément).