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
 UNE JOLIE-HORLOGE ET PAS QU'UN PEU !UNE JOLIE-HORLOGE ET PAS QU'UN PEU ! par neodante
Pour les possesseurs d'iPhone, ça y est Bijin Tokei - qui se traduit littéralement en Français par " Jolie Horloge " - est arrivé et GRATUITEMENT s'il vous plaît ! Après la version Tokyo, Hokkaido, night club, racing, Gal, "pour les mademoiselles'", . voi...
Cliquez pour lire la suite de l'article par neodante TECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICESTECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICES par ROMELARD Fabrice
Animé par: Gaetan Bouveret et Julien Chomarat Business Connectivity Services (BCS) est dans SharePoint 2010 la version 2 de Business Data Catalog (BDC dans SharePoint 2007). Il s'agit de la solution permettant de visualiser des données provenan...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice [DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE[DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE par orion
Comme de nombreux geek, je suis un grand amateur de série TV et je rate régulièrement des épisodes de mes séries préférés. Une solution s'offre à vous avec ce merveilleux site : Tv Gorge - www.tvgorge.com Moteur de recherche à l'appui, vous pouvez ...
Cliquez pour lire la suite de l'article par orion TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010 par ROMELARD Fabrice
Animé par: Vincent Bellet et Baptiste Giraudier La BI dans SharePoint 2010, Les nouveaux services d'application dans SP2010 et SQL Server Reporting services 2008 R2. La BI dans SharePoint est généralisée pour tous afin de permettre à tous les coll...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice
Logiciels
 DB-MAIN (9.1.0)DB-MAIN (9.1.0)DB-MAIN is a data-modeling and data-architecture tool. It is designed to help developers and anal... Cliquez pour télécharger DB-MAIN Xilisoft DPG Convertisseur (5.1.37.0120)XILISOFT DPG CONVERTISSEUR (5.1.37.0120)Xilisoft DPG Convertisseur offre aux fans de Nintendo DS une bonne solution leur permettant de dé... Cliquez pour télécharger Xilisoft DPG Convertisseur GraphicsGale (2.01.01)GRAPHICSGALE (2.01.01)GraphicsGale est un logiciel de PixelArt avec de nombreuse fonctionnalités permettant de réalisé ... Cliquez pour télécharger GraphicsGale Architecte 3D (Platinum 2010)ARCHITECTE 3D (PLATINUM 2010)Architecte 3D Platinium vous permet de concevoir facilement les plans votre future maison, de l'é... Cliquez pour télécharger Architecte 3D TeamViewer 5 (TeamViewer 5)TEAMVIEWER 5 (TEAMVIEWER 5)Dépanner un ami,expliquer une manipulation devient un jeu d'enfant.
Prise en main d'un autre ord... Cliquez pour télécharger TeamViewer 5
|