Accueil > > > INFOS BULLE PARAMÉTRABLE (TOUS NAVIGATEURS)
 INFOS BULLE PARAMÉTRABLE (TOUS NAVIGATEURS)
 Information sur la source
 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
- //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 ^^
 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
 Commentaires et avis
 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 à 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 à cocher merci
|
Derniers Blogs
 TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice
Speaker: Bernard Ourghanlian Cette session est comme chaque jour transmise en live par BrainSonic, et j'ai donc suivi cette troisième pleinière par ce moyen sur mon iPad . Elle est dédiée comme chaque année à la mise en perspective de l'é...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE !MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE ! par Vko
Hier durant une session dédiée aux Techdays 2012, j'ai eu le plaisir d'annoncer la sortie de la Béta 2 de Mishra Reader. C'est quoi ? Pour les utilisateurs, c'est une vraie expérience de lecture de flux RSS sur Windows. Rien à voir avec les produit...
Cliquez pour lire la suite de l'article par Vko [FRAMEWORK 4] LES TASKS ET LE THREAD UI[FRAMEWORK 4] LES TASKS ET LE THREAD UI par fathi
Je viens de passer quelques temps au TechDay's et j'ai pu voir pas mal de session intéressante. Par contre une chose m'a un peu étonné lors de certaines de ces sessions qui abordaient les améliorations du framework .NET (donc le 4.5) : en gros, bea...
Cliquez pour lire la suite de l'article par fathi WORKFLOW FOUNDATION 3 A UN PIED DANS LA TOMBEWORKFLOW FOUNDATION 3 A UN PIED DANS LA TOMBE par JeremyJeanson
Depuis déjà un an, je conseille vivement les utilisateurs de Workflow Foundation 3 à migrer vers la version 4. L'information qui va suivre ne devrait donc pas trop prendre au dépourvu les personnes qui m'ont suivi. Je profite de ce poste, pour faire le re...
Cliquez pour lire la suite de l'article par JeremyJeanson TECHDAYS PARIS 2012 : NOUVELLES TENDANCES DU POSTE DE TRAVAIL - BRING YOUR OWN PCTECHDAYS PARIS 2012 : NOUVELLES TENDANCES DU POSTE DE TRAVAIL - BRING YOUR OWN PC par ROMELARD Fabrice
Speakers: Thierry Rapatout, Antoine Petit et Xavier Trebbia Cette session entre dans le cadre des RDV Décideurs des TechDays 2012, elle est liée à la consumérisation de l'IT et la mise en place du "DeskTop as a Service" dans de plus en ...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice
Logiciels
 Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Easy-Planning (1.0.0.1)EASY-PLANNING (1.0.0.1)Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ... Cliquez pour télécharger Easy-Planning COLLECTOR PLUS (3.00B)COLLECTOR PLUS (3.00B)COLLECTOR PLUS version 3.00B est un logiciel utilisant une base de données alimentée par :
- L... Cliquez pour télécharger COLLECTOR PLUS PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO LettresFaciles 2011 (8.0.0.1)LETTRESFACILES 2011 (8.0.0.1)LettresFaciles est un logiciel facilitant la création et la rédaction de lettres types.
Son inte... Cliquez pour télécharger LettresFaciles 2011
|