begin process at 2010 03 21 20:07:01
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Effets

 > INFOS BULLE PARAMÉTRABLE (TOUS NAVIGATEURS)

INFOS BULLE PARAMÉTRABLE (TOUS NAVIGATEURS)


 Information sur la source

Note :
8,5 / 10 - par 2 personnes
8,50 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Effets Classé sous :info bulle, infos bulle, bulle, popup survol, tooltip Niveau :Initié Date de création :12/02/2008 Date de mise à jour :31/03/2008 15:23:39 Vu / téléchargé :14 684 / 1 169

Auteur : mattho

Ecrire un message privé
Commentaire sur cette source (25)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
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

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

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

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).

 Sources de la même categorie

AFFICHER OU CACHER UN COMPOSANT AVEC JAVASCRIPT V1.0 par xloadx
Source avec Zip MOOLOUPE - EFFET DE LOUPE VIA LE FRAMEWORK MOOTOOLS par Miky76
Source avec Zip MOOTOOLTIP par Miky76
Source avec Zip Source avec une capture PAINTPIX (VERSION TESTE. EXPORTATION IMAGE POUR SITE WEB) par sitajony
FONCTION BLINK ( TESTÉE SOUS FF ) PORTABILITÉ IE OP ET GC EN... par xloadx

 Sources en rapport avec celle ci

Source avec Zip MOOTOOLTIP par Miky76
Source avec Zip Source avec une capture DÉMO TOOLTIPS AVEC LA WWT par the_wwt
Source avec Zip INFO BULLE TOUJOURS VISIBLE par PetoleTeam
Source avec Zip BULLE par Zart
Source avec Zip Source avec une capture INFO-BULLE PERSONNALISABLE COMPATIBLE FIREFOX ET IE par mobman02

Commentaires et avis

Commentaire de nickadele le 13/02/2008 10:25:47 administrateur CS

Bonjour,

"J'ai cherché un moment un tel script sans trouver chaussure à mon pied"
>>> Pourtant c'est pas ce qu'il manque :
http://www.javascriptfr.com/codes/INFO-BULLE-COMPATIBLE-SELECT-DOCTYPE_38238.aspx

Nickadele

Commentaire de mattho le 13/02/2008 18:40:42

Salut,

Merci pour le lien, mais son concept est différent.
J'avais besoin pour mon application de changer la couleur d'arrière-plan en fonction d'un code couleur particulier, et j'ai subi quelques problèmes d'intégration (notemment de cohabitation avec d'autres scripts) voilà pourquoi j'ai codé mes propres infos-bulles.

Enfin, si mon code n'a pas sa place ici, je laisse les admins en décider...

Matthieu.

Commentaire de nickadele le 14/02/2008 11:28:01 administrateur CS

Bonjour,

il n'y a pas de problème à laisser ton code !

Nickadele

Commentaire de regis85 le 18/02/2008 09:40:41

Bonjour,

En testant votre script sous IE7, j'ai remarqué qu'en survolant la div arrière : l'infobulle apparaît bien, mais la div survolée se déplace en haut de la page.

Taz

Commentaire de proftnj le 18/02/2008 18:10:39

Salut

Moi, je n'ai rien (page blanche), même quand j'enlève 'display: none;'
(IE 7 - Win XP Pro SP2)

???

Commentaire de mattho le 18/02/2008 18:30:48

Merci beaucoup pour les commentaires, j'avoue avoir testé sous IE 6.

Je ferai mes modifications dans la semaine, beaucoup de travail en ce moment.

En tous cas j'apprécie vos réactions, merci bien.

Commentaire de Phoenix35 le 20/02/2008 20:00:16

Bonsoir. Tu utilises la plupart du temps des éléments DOM (document.getElement...) sans avoir d'équivalent MSIE (document.all). Ça peut créer une incompatibilité avec des anciennes versions d'IE. (Ne l'ayant pas testé sous IE 5, je ne peux pas dire que ton code défaille)

25. document.getElementById('bulle').innerHTML = texte;
26. document.getElementById('bulle').style.backgroundColor = couleur;

Commentaire de mattho le 20/02/2008 20:13:41

Merci bien Phoenix35, je me demandais souvent dans les script utilisant le DOM ce que faisait "document.all" dans le code... Maintenant j'ai la réponse.

V2 à venir bientôt, merci à tous pour les commentaires c'est cool.

Commentaire de dlimouzin le 30/03/2008 20:16:36

Bonsoir,
J'utilise ce script non pas dans un div mais l'appel se fait par survol d'une case d'un tableau qui est dans une zone "scrollable".Le positionnement de l'info n'est pas toujours visible lorsque le scroll est plus ou moins loin.
Y a-t-il possibilité que l'infobulle soit juste au point de survol et ne se décale pas en fonction du scroll
Merci.

Commentaire de mattho le 31/03/2008 12:07:23

Bonjour DLIMOUZIN

Je viens de mettre en ligne la nouvelle version de mon script qui prend en compte le scroll. J'attends vos retours ;)

Merci, @+

Commentaire de proftnj le 31/03/2008 15:13:39

Avec Internet Explorer 7, le div sursaute (tremble verticalement) au passage de la souris. Avec Firefox, il n'y a pas de problème, c'est impeccable.

Commentaire de mattho le 31/03/2008 19:15:25

Salut PROFTNJ.

Testé avec IE 7 sous Windows Vista SP1, aucun soucis de ce type, désolé.

@+

Commentaire de proftnj le 31/03/2008 19:31:11

Bizarre.

Je viens de retester la page avec IE 7 sous Windows XP SP2 et le div survolé n'est pas stable : "margin-top: 50px;" est comme "éliminé" au survol de la souris et le div se retrouve en haut de page. Onmouseout --> le div reprend sa place.

???

Commentaire de mattho le 31/03/2008 19:41:17

Re-télécharge le zip, le margin-top n'est plus appliqué sur le div mais sur le body.
Je l'ai débuggué cet après-midi et depuis je n'ai plus de soucis.

Enfin, le "bug" d'IE était présent dans la page exemple, et non dans la source .js. Donc si ton fichier est bien configuré avec des CSS propres, il n'y a pas de raison d'avoir ce genre de soucis.

@+

Commentaire de dlimouzin le 31/03/2008 19:51:15

Merci à tous.
Script sympa et pratique.
A bientôt

Commentaire de mattho le 31/03/2008 19:59:46

Y a pas d'quoi DLIMOUZIN ;)

Ca me fait plaisir que ça te convienne !

Commentaire de proftnj le 31/03/2008 20:02:01 8/10

Le script débuggé fonctionne parfaitement sous IE 7.
Bravo !

Commentaire de Fidzy le 13/05/2008 23:11:02

Voici un petit bout de code pour la gestion des document.getElement/document.all

function getEl(n){
  return (document.all)?document.all[n]:document.getElementById(n);
}

Au plaisir

Commentaire de matthosback le 14/05/2008 07:50:14

Salut Fidzy, petit bout de code interressant en effet, merci !

@+

Commentaire de infobarquee le 29/01/2009 01:49:11

bonjour,
j'ai decouvert ce script il y a 2 jours et il me convient.
2 petites choses.
1/ y a t'il possibilite d'afficher la bulle en premier plan, car comme je l'utilise sur une carte avec des points elle se place derriere ceux ci et c'est genant.
ou alors de l'afficher au meme endroit sur la page pour tous les appels a la bulle.
2/ en local sur mon pc cela fontionne mais pas sur un serveur normal??? pourquoi?
sinon bravo pour ce script sympa

Commentaire de matthosback le 29/01/2009 15:17:51

Bonjour InfoBarquée !

Ravi que mon code te convienne :)

Pour ton problème de premier plan, je suppose qu'il suffit de régler la propriété de bulle.style.zIndex à une valeur supérieure.
Pour ceci j'avais prévu la fonction up_zindex_bulle().

Pour ton second problème, je suis désolé je ne vois pas d'où peut venir le soucis, il n'y a pas de raison que cela marche en local et non sur un serveur...

J'espère que tu vas y arriver, et n'hésite pas si tu as d'autres questions.

@+

Commentaire de infobarquee le 29/01/2009 23:46:11

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 "<div style='position:absolute; top:".$y."px; left:".$x."px; width:10px; height:10px; z-index:300;'><img src=\"point.jpg\" onmouseover=\"afficher_bulle('<b>$date<br/>$title : $cp<br/>$description</b> ','white',event)\" onmouseout=\"masquer_bulle()\"></div>" ;
}
le local est sous windows et le server est sous unix, il doit y avoir un truc mais ou??????

Commentaire de infobarquee le 30/01/2009 11:52:56

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?

Commentaire de matthosback le 30/01/2009 11:57:10

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.

Commentaire de infobarquee le 30/01/2009 12:38:09 9/10

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.

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

bug info bulle [ par ntfree ] voila, c tt simple, g chopé le script info bulle de ce site.mais le probleme, c'est ke maintenant, il est impossible de selectionner du texte sur le s Infos Bulle [ par Florette ] Tout d'abord bonjour à vous tous,Mon soucis est lorsque je survol une image, une info bulle apparaît, mais trop lentement. Il faut rester un certain t PB avec INFO BULLE [ par renaud1102 ] Bonjour,J'ai un formulaire, et quand je passe le curseur de ma souris sur un des liens, l'info bulle apparait sous les cases du formulaire. Donc je ne Tooltips [ par bosam ] Bonjour à tous le monde,Voilà, je poste ici car j'ai découvert sur ce site http://www.walterzorn.com/tooltip/tooltip_e.htm ; un script javascript DHTM problème affichage info bulle [ par _lolo ] Bonjour,Voilà j'ai récupéré un p'tit script pour faire de belles infos bulles :)Malheureusement les infos bulles qui apparaissent dans le menu droit d tooltip et select [ par Djfresh ] salut comment creer un tooltip sur une balise select!plus precisément sur les balises option de la balise select?autrement dit en survolant les balise un menu genre bulle d'aide [ par daeron ] J'ai bien regarde les sources mais je n ai pas trouve d inspiration...L'idee est simple c est de realiser une bulle d aide avec differents menus un pe info bulle [ par fixou47 ] Bonjour à touscomment pouvoir mettre plusieurs lignes dans une info bulle ?du type : ordre du jour -approbations une info bulle qd je survole une checkbox [ par adilou1981 ] bonjour je voudrais savoir quel script permet d'afficher une info bulle qd le curseur passe dessus une case &#224; cocher merci info bulle [ par adilou1981 ] bonjour je voudrais savoir quel script permet d'afficher une info bulle qd le curseur passe dessus une case &#224; cocher merci


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,265 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales