INFO BULLE TOUJOURS VISIBLE

//-------------------------------------------------------------
//  Nom Document : GFBULLE.JS
//  Auteur       : G.Ferraz
//  Objet        : Info Bulle...
//  Création     : 01.12.2003
//-------------------------------------------------------------
//  Mise à Jour  : 29.05.2006
//  Objet        : Compatibilité IE6 et DOCTYPE
//  -----------------------------------------------------------
//  Mise à Jour  : 15.09.2006
//  Objet        : Amélioration et modif suite à commentaires
//  -----------------------------------------------------------
//  Mise à Jour  : 10.11.2006
//  Objet        : Correction Bug sous FF si document <DIV style="float...">
//  -----------------------------------------------------------
var DOM = (document.getElementById ? true : false);
var IE  = (document.all && !DOM ? true : false);
var NAV_OK   = ( DOM || IE );
var NETSCAPE = ( navigator.appName == 'Netscape');
var Mouse_X;                // Position X en Cours de la Mouse
var Mouse_Y;                // Position Y en Cours de la Mouse
var Decal_X;         // Décalage X entre Pointeur Mouse et Bulle
var Decal_Y;         // Décalage Y entre Pointeur Mouse et Bulle
var bBULLE   = false;       // Flag Affichage de la Bulle
var Fenetre  = new RECT();  // pour dimension fenêtre
//-------------
function RECT(){
  this.Left   =0;
  this.Top    =0;
  this.Right  =0;
  this.Bottom =0;
}
//---------------------
function GetObjet(div_){
  if( DOM) return document.getElementById(div_);
  if( IE)  return document.all[div_];
  return( null);
}
//-- 10.11.2006 ----------------------------
// correction bug sur <DIV style="float...">
//------------------------------------------
function Get_DimFenetre(){
  var L_Doc;
  var H_Doc;
  var DocRef;
  
  with( Fenetre){
    if( window.innerWidth){
      with( window){
        Left   = pageXOffset;
        Top    = pageYOffset;
        Right  = innerWidth;
        Bottom = innerHeight;
        //-- Modif du 10.11.2006
        L_Doc = document.body.clientWidth;
        H_Doc = document.body.clientHeight;
        //-- fin modif.
        if( Right  > L_Doc) Right  = L_Doc;
        if( Bottom > H_Doc) Bottom = H_Doc;
      }
    }
    else{ // Cas Explorer à part
      if( document.documentElement && document.documentElement.clientWidth)
        DocRef = document.documentElement;
      else
        DocRef = document.body;

      with( DocRef){
        Left   = scrollLeft;
        Top    = scrollTop;
        Right  = clientWidth;
        Bottom = clientHeight;
      }
    }
    //-- limite Maxi Fenêtre Affichage
    Right  += Left;
    Bottom += Top;
  }
}
//------------------------------------
function ObjShowAll( div_, x_, y_, z_){
  var B_Obj = GetObjet( div_);
  var F_Obj = GetObjet( 'F' +div_);
  var MaxX, MaxY;
  var Haut, Larg;
  var SavY = y_;

  if( B_Obj){
    //-- Récup. dimension du DIV
    if( NETSCAPE){
      Larg = B_Obj.offsetWidth;
      Haut = B_Obj.offsetHeight;
    }
    else{
      Larg = B_Obj.scrollWidth;
      Haut = B_Obj.scrollHeight;
    }
    with( Fenetre){
      //-- Réajuste dimension fenêtre
      MaxX = Right  - Larg;
      MaxY = Bottom - Haut;

      //-- Application Bornage
      if( x_ > MaxX) x_ = MaxX;
      if( x_ < Left) x_ = Left;
      if( y_ > MaxY) y_ = MaxY;
      if( y_ < Top)  y_ = Top;
    }
    //-- si en bas On réajuste
    //-- pour que la bulle ne prenne pas le focus
    if( y_== MaxY){
      var DeltaY = MaxY -SavY;
      y_ = MaxY - DeltaY -Haut -2*Decal_Y;
    }
    with(B_Obj.style){
      left       = x_ +"px";
      top        = y_ +"px";
      zIndex     = z_;
      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 paramètre x_ et y_
//--------------------------------------
function BulleWrite( txt_, x_, y_){
  var B_Obj = GetObjet( 'Bulle');
  var Html;
  if( B_Obj){
    //-- Récup dimension d'affichage
    Get_DimFenetre();
    // Decalage hors de la Bulle
    Decal_X =( x_ ? x_: 5);//    Decal_X = 5 par défaut
    Decal_Y =( y_ ? y_: 5);//    Decal_Y = 5 par défaut
    //-- Ecriture de la Bulle 
    Html  = "<TABLE BORDER=0 CELLSPACING=0><TR><TD BGCOLOR='#0000f0'>";
    Html += "<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=4 WIDTH='100%' BGCOLOR='#FFFFE8'>";
    Html += "<TR><TD class='Bulle' NOWRAP>";
    Html += txt_;
    Html += "<\/TD><\/TR><\/TABLE><\/TD><\/TR><\/TABLE>";
    B_Obj.innerHTML = Html;
    //-----------------------------------------//
    // IMPORTANT on n'affiche pas la Bulle     //
    // l'événement MouseOver va avec MouseMove //
    //-----------------------------------------//
    // ObjShowAll('Bulle', Mouse_X +Decal_X, Mouse_Y +Decal_Y, 1000);
    bBULLE= true;
    return( true);
  }
 return(false);
}
//------------------
function BulleHide(){
  var B_Obj = GetObjet( 'Bulle');
  with(B_Obj){
    innerHTML        = "&nbsp;"
    style.left       = -1000 +"px";
    style.top        = -1000 +"px";
    style.zIndex     = 0;
    style.visibility = "hidden";
  }
  bBULLE = false;
  return(true);
}
//--------------------
function WhereMouse(e){
  var DocRef;
  //-- On traque les hybrides
  if( e && e.target){
    Mouse_X = e.pageX;
    Mouse_Y = e.pageY;
  }
  else{
    if( document.documentElement && document.documentElement.clientWidth)
      DocRef = document.documentElement;
    else
      DocRef = document.body;

    Mouse_X = event.clientX +DocRef.scrollLeft;
    Mouse_Y = event.clientY +DocRef.scrollTop;
  }

  if( bBULLE)
    ObjShowAll('Bulle', Mouse_X +Decal_X, Mouse_Y +Decal_Y, 1000);

  return( true);
}
//== INITIALISATION ==================================
//-- 15.09.2006 ------------------------
// Ajout Fonction Add_Event
// Permet de faire autre chose...
//--------------------------------------
//document.onmousemove = WhereMouse;
Add_Event( document, 'mousemove', WhereMouse);

//-- Création STYLE Bulle et DIV----------------------
var Html;
  //-- On met du style pour la bulle
  Html  = '<STYLE TYPE="text/css">';
  Html += '.Bulle{cursor:default;color:#000000;font-size:13px;font-family:Verdana;}';
  Html += '</STYLE>';
  //-- Création du DIV Bulle
  Html +='<div id="Bulle" style="position:absolute; left:auto; top:auto; width:auto; height:auto; z-index:0; visibility:hidden"></div>';
  document.write( Html);
//-- EOF ------------------------------------------------------

Télécharger le zip

30 mai 2006 09:34:42 :

Prise en compte spécificité de IE6 et DOCTYPE

10 novembre 2006 18:45:48 :

Amélioration et modif suite à commentaires Correction d'un Bug existant sous FF si uniquement <DIV style="float..."> dans le document