Info bulle toujours visible

Soyez le premier à donner votre avis sur cette source.

Vue 21 830 fois - Téléchargée 2 563 fois

Description

Info Bulle...
...ou comment la coincer dans la fenêtre d'affichage...

But du Jeu...
1/ Faire apparaître une InfoBulle lorsque l'on passe au dessus d'un lien ou autres balises...
2/ Faire que l'InfoBulle soit toujours entièrement visible...
3/ Faire que l'InfoBulle suive le curseur quand c'est possible, cas des bords du document...
4/ Etre compatible avec les principaux navigateurs...( IE, FireFox, Opera, NetScape )

Ci dessous le contenu du fichier gfbulle.js

Source / Exemple :


//-------------------------------------------------------------
//  Nom Document : gfbulle.js
//  Auteur       : G.Ferraz
//  Objet        : Info Bulle...
//  Creation     : 01.12.2003
/*-------------------------------------------------------------
Version :
15.09.2008
 - Ajout possibilite d'afficher un objet cache
 - BulleHide n'est plus obligatoire
 - Optimisations diverses
15.08.2007
 - Ajout fonction Init_Bulle plus esprit DOM plus modif. mineures.
10.11.2006
 - Correction Bug sous FF si document <DIV style="float...">
15.09.2006
 - Ajout parametre x_ et y_ sur la fonction BulleWrite
 - Amelioration, modif. mineures.
29.05.2006
 - Compatibilite IE6 et DOCTYPE
10.11.2003
 - version initiale
-------------------------------------------------------------*/
var bullewrite = BulleWrite;
var Mouse_X;                // Position X en Cours de la Mouse
var Mouse_Y;                // Position Y en Cours de la Mouse
var Decal_X;                // Decalage X entre Pointeur Mouse et Bulle
var Decal_Y;                // Decalage Y entre Pointeur Mouse et Bulle
var bBULLE  = false;        // Flag Affichage de la Bulle
var Fenetre = new Object(); // pour dimension fenetre
//-- 10.11.2006 ----------------------------
// correction bug sur <DIV style="float...">
// Gestion Probleme Barre de scroll sous FireFOX
//------------------------------------------
function Win_GetDimension(){
  //-- Variables locales
  var Top, Left, Width, Height;
  var ddE = document.documentElement;
  var dB  = document.body;

  if( window.innerWidth){
    with( window){
      //-- position scrolling
      Left   = pageXOffset;
      Top    = pageYOffset;
      //-- dimension scroll compris
      Width  = innerWidth;
      Height = innerHeight;
      //-- Recup Max et min Hauteur du document
      var H_Max = Math.max( ddE.clientHeight, dB.clientHeight);
      var H_Min = Math.min( ddE.clientHeight, dB.clientHeight);
      //-- si hauteur document plus grand que fenetre
      if( H_Max > Height)
        Height = H_Min;
      //-- si hauteur document plus petit que fenetre
      else
        Height = H_Max;
      //-- Recup Max et min Largeur du document
      var L_Max = Math.max( ddE.clientWidth, dB.clientWidth);
      var L_Min = Math.min( ddE.clientWidth, dB.clientWidth);
      //-- si largeur document plus grand que fenetre
      if( L_Max > Width)
        Width = L_Min;
      //-- si largeur document plus petit que fenetre
      else
        Width = L_Max;
    }
  }
  else{ // Cas Explorer a part le plus simple
    var DocRef;
    if( ddE && ddE.clientWidth)
      DocRef = ddE;
    else
      DocRef = dB;
    with( DocRef){
      Left   = scrollLeft;
      Top    = scrollTop;
      Width  = clientWidth;
      Height = clientHeight;
    }
  }
  return({ width : Width, height : Height, top: Top, right: Left +Width, bottom: Top + Height, left: Left });
}
//------------------------------------
function ObjShowAll( div_, x_, y_, z_){
  var O_Bulle = document.getElementById( div_);
  var MaxX, MaxY;
  var Haut, Larg;
  var SavY = y_;
  if( O_Bulle){
    //-- Recup. dimension du DIV
    Larg = O_Bulle.offsetWidth;
    Haut = O_Bulle.offsetHeight;
    //-- Reajuste dimension fenetre
    MaxX = Fenetre.right  - Larg;
    MaxY = Fenetre.bottom - Haut;
    //-- Application Bornage
    if( x_ > MaxX) x_ = MaxX;
    if( x_ < Fenetre.left) x_ = Fenetre.left;
    if( y_ > MaxY) y_ = MaxY;
    if( y_ < Fenetre.top)  y_ = Fenetre.top;
    //-- si en bas On reajuste
    //-- pour que la bulle ne prenne pas le focus
    if( y_== MaxY){
      var DeltaY = MaxY -SavY;
      if( Mouse_X > x_) // Ajout optimisation placement
        y_ = MaxY - DeltaY -Haut -2*Decal_Y;
    }
    //-- Place la bulle
    O_Bulle.style.left       = x_ +"px";
    O_Bulle.style.top        = y_ +"px";
    O_Bulle.style.zIndex     = z_;
    O_Bulle.style.visibility = "visible";
  }
}
//-- 15.09.2006 ------------------------
// Ajout Fonction Add_Event
//--------------------------------------
function Add_Event( obj_, event_, func_, mode_){
  if( obj_.addEventListener)
    obj_.addEventListener( event_, func_, mode_? mode_:false);
  else
    obj_.attachEvent( 'on'+event_, func_);
}
//-- 15.09.2006 ------------------------
// Ajout parametre x_ et y_
//-- 15.09.2008 ------------------------
// Ajout passage de l'ID d'un Objet
//--------------------------------
function BulleWrite( txt_, x_, y_){
  var O_Bulle = document.getElementById( 'GF_BULLE');
  //-- Test oubli parametre ou vide
  txt_ = txt_ ? txt_ :"<span style='color:red;'><b>ERREUR<\/b> : paramètre <b>txt_<\/b> omis...<\/span>";
  if( O_Bulle){
    //-- Recup dimension d'affichage
    Fenetre = Win_GetDimension();
    // Decalage hors de la Bulle
    Decal_X =( x_ ? x_: 5);  //  Decal_X = 5 par defaut
    Decal_Y =( y_ ? y_: 5);  //  Decal_Y = 5 par defaut

    //-- Teste si ID Objet
    var tabTmp = txt_.split(':');
    if( tabTmp[0].toLowerCase() ==('id')){
      var szID = tabTmp[1];
      var O_Src = document.getElementById( szID);
      if( O_Src){
        var O_Clone = O_Src.cloneNode( true);
        O_Bulle.appendChild( O_Clone);
        O_Clone.style.display = '';
        O_Clone.style.visibility = 'visible';
        bBULLE= true;
      }
      else{
        //-- ERREUR on previent
        txt_ ="<span style=\'color:red;\'\><b>ERREUR<\/b> : Objet ID : [<b>"+ tabTmp[1] +"<\/b>] non définie...<\/span>";
        setTimeout( "BulleWrite(\"" + txt_ +"\"," + x_+"," + y_+")", 10);
        return( false);
      }
    }
    else{
      //-- Ecriture de la Bulle
      O_Bulle.innerHTML = "<div class='gfbulle'>" +txt_ +"<\/div>";
    }
    //-----------------------------------------//
    // IMPORTANT on n'affiche pas la Bulle     //
    // l'evenement MouseOver va avec MouseMove //
    //-----------------------------------------//
    // ObjShowAll('GF_BULLE', Mouse_X +Decal_X, Mouse_Y +Decal_Y, 1000);
    bBULLE= true;
    return( true);
  }
 return(false);
}
//------------------
function BulleHide(){
  var O_Bulle = document.getElementById( 'GF_BULLE');
  with(O_Bulle){
    innerHTML     = "";
    style.left    = -1000 +"px";
    style.top     = -1000 +"px";
    style.zIndex  = 0;
    style.visibility = "hidden";
  }
  bBULLE = false;
  return(true);
}
//--------------------
function WhereMouse(e){
  var O_Src;
  var ddE = document.documentElement;
  var dB  = document.body;
  //-- On traque les hybrides
  if( e && e.target){
    Mouse_X = e.pageX;
    Mouse_Y = e.pageY;
    O_Src   = e.target;
  }
  //-- Pour IE
  else{
    var DocRef;
    if( ddE && ddE.clientWidth)
      DocRef = ddE;
    else
      DocRef = dB;

    Mouse_X = event.clientX +DocRef.scrollLeft;
    Mouse_Y = event.clientY +DocRef.scrollTop;
    O_Src   = event.srcElement;
  }
  //-- Affiche Bulle si necessaire
  if( bBULLE){
    //-- Ajoute evenement mouseout
    if( !O_Src.gf_flag){
      O_Src.gf_flag = true;
      Add_Event( O_Src, 'mouseout', BulleHide);
    }
    ObjShowAll('GF_BULLE', Mouse_X +Decal_X, Mouse_Y +Decal_Y, 1000);
  }
  return( true);
}
//-- 15.08.2007 ---------------------------
// Fonction plus DOM que les document.write
//-----------------------------------------
function Init_Bulle(){
  if( document.createElement){
    //-- Creation du DIV Bulle
    var O_New = document.createElement('div');
    //-- Definition du style
    with( O_New){
      id               = "GF_BULLE";
      style.position   = "absolute";
      style.left       = "0px";
      style.top        = "0px";
      style.width      = "auto";
      style.height     = "auto";
      style.zIndex     = 0;
      style.visibility = "hidden";
    }
    //-- Ajout de l'element DIV
    document.body.appendChild( O_New);
    //-- Ajout evenement position
    Add_Event( document, 'mousemove', WhereMouse);
  }
}
//== INITIALISATION ==================================
Add_Event( window, 'load', Init_Bulle);
//-- EOF ------------------------------------------------------

Conclusion :


Le fichier gfbulle.htm joint au zip vous permettra de découvrir l'utilisation des fonctions et leur résultats...

Nouveauté
Le paramètre de la fonction peut être l'id d'un objet de la page, caché avec display:none, cela vous facilite, ainsi, l'écriture de l'InfoBulle...

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
Bonjour,
La réalisation peut se faire par l'ajout d'une image, dans un DIV par exemple, que tu positionne suivant le cas.
Suivant ce cas justement, il te faut gérer plusieurs images, une gauche haut et bas, une droite haut et bas et une centre haut et bas, que tu positionnes de telle sorte à masquer une partie du cadre.
Voilou pour le principe...
;O)
Messages postés
4
Date d'inscription
samedi 31 janvier 2004
Statut
Membre
Dernière intervention
25 juin 2010

Bonjour petoleteam,

Merci beaucoup pour la réponse. J'ai en fait constaté que ça ne le faisait pas parceque les positions étaient figées dans le css associé à la bulle. J'aimerais en réalité avoir une images différentes dés que la bulle se retourne (pour afficher une petite flèche) et donc avoir possibilité d' associer deux styles css plutôt qu'un mais je n'ai pas encore trouvé comment faire :-(
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
Bonjour,
normalement cela le fait...
ou alors le problème est autre ?
;O)
Messages postés
4
Date d'inscription
samedi 31 janvier 2004
Statut
Membre
Dernière intervention
25 juin 2010

Bonjour à tous,

Merci beaucoup pour la source, elle fonctionne très bien :-)

J'ai une petite question :

Dans le cas où la bulle arriverait en fin de page et pour éviter une scrollbar verticale (intégration du script dans une iframe ayant une taille fixe), j'aimerais savoir comment inverser le sens de la bulle uniquement en cas de dépassement, càd afficher la bulle en haut du curseur plutôt que l'afficher en bas du curseur, quelqu'un aurait-il une idée ?

Merci d'avance
Messages postés
10
Date d'inscription
mercredi 10 décembre 2003
Statut
Membre
Dernière intervention
9 juin 2008

J'ai vu les nouvelles sources, je vais les essayer demain.
Je vous tiens au courant.
Afficher les 39 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.