Infos bulle paramétrable (tous navigateurs)

5/5 (26 avis)

Vue 20 770 fois - Téléchargée 1 613 fois

Description

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 ^^

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
1
Date d'inscription
jeudi 18 mars 2010
Statut
Membre
Dernière intervention
15 mai 2010

Bonjour,
je cherche à modifier la police d'affichage du texte contenu dans la bulle mais je n'y parviens pas. J'ai essayé de mettre un entre les balises car j'ai vu qu'à cet endroit-là un
est reconnu, mais ça ne fonctionne pas pour le font.

J'ai également tenté un
onmouseout="masquer_bulle();" style="background-color: #FFDD99; width:15px; height: 15px; line-height: 100px; text-align: center; font-weight: bold; font-size: 18px;"
mais rien n'y fait.
Mattho pourrait m'aider ? ou quelqu'un d'autre...
Merci d'avance,
Olivier
Messages postés
11
Date d'inscription
mardi 11 novembre 2008
Statut
Membre
Dernière intervention
30 janvier 2009

j'ai deja fais cette manip, et malheureusement le resultat est le meme.
erreur sur la page en bas a gauche.
tout fonctionne parfaitement sur mon local.
j'ai essaye avec un autre script infobulle et idem.
je penche de plus en plus pour un pb du serveur hebergeur malgre que le javascript soit charge sur le pc et non sur le serveur.
Messages postés
3
Date d'inscription
lundi 7 avril 2008
Statut
Membre
Dernière intervention
30 janvier 2009

Je te conseille de télécharger le .zip entier et de faire tes test en local et à distance.

Tu verras comment j'ai procédé pour importer le .js, etc.
Messages postés
11
Date d'inscription
mardi 11 novembre 2008
Statut
Membre
Dernière intervention
30 janvier 2009

bonjour,
je viens de voir que si je declare le javascript dans le head, cela ne fonctionne plus en local ni sur le server.
alors que dans le body pas de pb en local mais pb sur le server.
peut etre un pb de declaration dans le js?
Messages postés
11
Date d'inscription
mardi 11 novembre 2008
Statut
Membre
Dernière intervention
30 janvier 2009

merci, mais apres recherche des erreurs toujours rien.
ca fonctionne tres bien sur mon local avec wamp mais pas sur le server, comme si le java n'etait pas appele.
la ligne qui pourrait poser pb est celle ci, mais je trouve pas d'erreur
echo "
$date
$title : $cp
$description ','white',event)" onmouseout="masquer_bulle()">
" ;
}
le local est sous windows et le server est sous unix, il doit y avoir un truc mais ou??????
Afficher les 26 commentaires

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.