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
 PRATIQUE DE SILVERLIGHT PAR ERIC AMBROSIPRATIQUE DE SILVERLIGHT PAR ERIC AMBROSI par MPOWARE
Je viens de finir la lecture du dernier livre d'
Eric Ambrosi
éditions PEARSON
Son livre donne une approche pratique de Silverlight qui sera aussi bien comprise par le développeur que par le designeur.
Tous les aspects du développement RIA sont abor...
Cliquez pour lire la suite de l'article par MPOWARE APPRENDRE à DéVELOPPER POUR LES MOBILES AVEC LA NOUVELLE GéNéRATION .NETAPPRENDRE à DéVELOPPER POUR LES MOBILES AVEC LA NOUVELLE GéNéRATION .NET par odewit
2 déclinaisons de Silverlight et 2 déclinaisons de Mono permettent dorénavant (ou permettront prochainement) de développer des applications .NET mobiles pour les principales plates-formes du marché :
Silverlight pour Symbian, basé sur Silverlight 2...
Cliquez pour lire la suite de l'article par odewit ZUNE : NOUVELLE VERSION DU ZUNE SOFTWARE - V 4.2ZUNE : NOUVELLE VERSION DU ZUNE SOFTWARE - V 4.2 par ROMELARD Fabrice
Avec la dernière génération du lecteur MP3 de Microsoft, le ZUNE HD, Microsoft a publié une nouvelle version du logiciel pour PC. Ainsi, je me suis décidé à installer celle-ci sur mon Tablet PC ACER, comme toujours le logiciel est donc tél...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice L'INTERFACE NATURELLE DE WINDOWS PHONE 7 SERIESL'INTERFACE NATURELLE DE WINDOWS PHONE 7 SERIES par odewit
La tendance est aux interfaces naturelles (NUI), et le keynote de Bill Buxton au MIX l'a bien souligné.
La charte graphique et ergonomique de Windows Phone 7 a donc été entièrement repensée en vue d'obtenir un maximum d'efficacité sur ce point. En re...
Cliquez pour lire la suite de l'article par odewit
Logiciels
 Academy System (10.9.4.0)ACADEMY SYSTEM (10.9.4.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Xilisoft Convertisseur Vidéo Ultimate (5.1.39.0305)XILISOFT CONVERTISSEUR VIDéO ULTIMATE (5.1.39.0305)Xilisoft Convertisseur Vidéo Ultimate est un outil puissant de conversion vidéo, facile à utilise... Cliquez pour télécharger Xilisoft Convertisseur Vidéo Ultimate Xilisoft DVD Ripper Ultimate (5.0.64.0304)XILISOFT DVD RIPPER ULTIMATE (5.0.64.0304)Xilisoft DVD Ripper Ultimate est un logiciel excellent pour copier et convertir DVD vers presque ... Cliquez pour télécharger Xilisoft DVD Ripper Ultimate Rigs of Rods (63.3)RIGS OF RODS (63.3)c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo... Cliquez pour télécharger Rigs of Rods
|