Fermer

Visiteur non-identifié | Identifiez-vous | Devenir membre
Code perdu ? | Combien de visiteurs sur votre site ?

Info Bulle Toujours Visible

Script posté par :

Petole Team
Vous aussi, postez vos scripts en cliquant ici.

Description

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 )

Compatibilité :

	FireFox : Toutes versions
	Mozilla : 1 et +
	Netscape Navigator : 4 et +
	Internet Explorer : 5 et +

Ce script utilise le DHTML

Chiffres :

Date de création : 29/03/2006
Dernière modif : -
Visites de la page : 16052
Envois par mail : 317

Exemple :

Le code :

Entre <HEAD> et </HEAD> :

<STYLE TYPE="text/css">
.T0{color:#bb0000;font-size:20px;font-family:Verdana,sans serif;font-weight:bold;}
.T1{color:#bb0000;font-size:13px;font-family:Verdana,sans serif;text-align:left;}
.L0{color:#000000;font-size:13px;font-family:Verdana,sans serif;text-align:left; background-color:#f0f0f0;}
.L1{color:#000000;font-size:13px;font-family:Verdana,sans serif;text-align:right;background-color:#f0f0f0;}
.L2{color:#000000;font-size:13px;font-family:Verdana,sans serif;text-align:left; background-color:#c0c0f0;}
.S0{color:#0000bb;font-size:13px;font-family:Verdana,sans serif;font-weight:bold;}
.S1{color:#0000bb;font-size:15px;font-family:Verdana,sans serif;font-weight:bold;}
PRE{color:#000000;font-size:13px;font-family:Courier;margin:0px;}
.Bl{color:#0000ff;font-size:13px;font-family:Verdana,sans serif;}
.Rg{color:#f00000;font-size:15px;font-family:Verdana,sans serif;font-weight:bold;}
</STYLE>
<SCRIPT SRC="gfbulle.js" LANGUAGE ="javascript"></SCRIPT>
<script language="JavaScript">

</script>

Entre <BODY> et </BODY> :

Dans un fichier nommé gfbulle.js placé dans le même repertoire que votre page :

//-----------------------------------------------------------
//  Nom Document : GFBULLE.JS
//-----------------------------------------------------------
var DOM = (document.getElementById ? true : false);
var IE  = (document.all && !DOM ? true : false);
var NS4 = (document.layers ? true : false);
var NAV_OK   = ( DOM || IE || NS4);
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 TopIndex = 1;   // Z-Index interne
var Decal_X  = 5;   // Décalage X entre Pointeur Mouse et Bulle
var Decal_Y  = 5;   // Décalage Y entre Pointeur Mouse et Bulle
var bBulle= false;  // Flag Affichage de la Bulle
//-------------
function Void(){}
//---------------------
function GetObjet(div_){
  if( DOM) return document.getElementById(div_);
  if( IE)  return document.all[div_];
  if( NS4) return document.layers[div_];
}
//---------------------
function GetStyle(div_){
  return (NS4 ? GetObjet(div_) : GetObjet(div_).style);
}
//---------------------
function ObjHide( div_){
  var Obj = null;
  if( div_){
    Obj = GetStyle( div_);
    if( Obj){
      Obj.visibility= "hidden";
    }
  }
  return(true);
}
//-------------------------
function ObjShow( div_, z_){
  var Obj = null;
  if( div_){
    Obj = GetStyle( div_);
    if( Obj){
      Obj.visibility = "visible";
      if( arguments[1] != null)
        Obj.zIndex = z_;
      else
        Obj.zIndex = TopIndex++;
    }
  }
  return(true);
}
//-----------------------------
function ObjWrite( div_, html_){
  var Obj;
  Obj = GetObjet( div_);
  if( Obj) with( Obj){
    if( !NS4){
      innerHTML = html_;
    }
    else{
      document.open();
      document.write( html_);
      document.close();
    }
  }
}
//-----------------------------
function ObjMove( div_, x_, y_){
  var Obj = null;
  var Arg = arguments;
  if( div_){
    Obj = GetStyle( div_);
    if( Obj){
      if( NETSCAPE){
        if( Arg[1] != null) Obj.left = parseInt( Obj.left) +x_;
        if( Arg[2] != null) Obj.top  = parseInt( Obj.top)  +y_;
      }
      else{
        if( Arg[1] != null) Obj.pixelLeft = parseInt( Obj.pixelLeft) +x_;
        if( Arg[2] != null) Obj.pixelTop  = parseInt( Obj.pixelTop)  +y_;
      }
    }
  }
}
//-------------------------------
function ObjMoveTo( div_, x_, y_){
  var Obj = null;
  var Arg = arguments;
  if( div_){
    Obj = GetStyle( div_);
    if( Obj){
      if( NETSCAPE){
        if( Arg[1] != null) Obj.left = x_;
        if( Arg[2] != null) Obj.top  = y_;
      }
      else{
        if( Arg[1] != null) Obj.pixelLeft = x_;
        if( Arg[2] != null) Obj.pixelTop  = y_;
      }
    }
  }
}
//------------------------------------
function ObjShowAll( div_, x_, y_, z_){
  var Obj = GetObjet( div_);
  var MaxX;
  var MaxY;
  var Top;
  var Left;
  var Haut;
  var Larg;
  var SavY = y_;

if( Obj){
    //-- Récup. dimension fenêtre et DIV
    if( NETSCAPE){
      with( window){
        Left = pageXOffset;
        Top  = pageYOffset;
        MaxX = innerWidth;
        MaxY = innerHeight;
        if( MaxX > document.width)  MaxX = document.width;
        if( MaxY > document.height) MaxY = document.height;
        MaxX += Left;
        MaxY += Top;
      }
      if( NS4){
        Larg = Obj.clip.width;
        Haut = Obj.clip.height;
      }
      else{
        Larg = Obj.offsetWidth;
        Haut = Obj.offsetHeight;
      }
    }
    else{
      with( document.body){
        Left = scrollLeft;
        Top  = scrollTop;
        MaxX = Left +clientWidth;
        MaxY = Top  +clientHeight;
      }
      Larg = Obj.scrollWidth;
      Haut = Obj.scrollHeight;
    }
    //-- Réajuste dimension fenêtre
    MaxX -= Larg;
    MaxY -= 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;
    }

//-- On place la Bulle
    ObjMoveTo( div_, x_, y_);
    ObjShow( div_, z_);
  }
}
//------------------------
function BulleWrite( txt_){
 var Obj;
 var Html;
 Obj = GetObjet( 'Bulle');
 if( Obj){
    Html  = "<TABLE BORDER=0 CELLSPACING=0><TR><TD BGCOLOR='#0000c0'><TABLE BORDER=0 CELLSPACING=0 CELLPADDING=4 WIDTH='100%' BGCOLOR='#FFFFE8'>";
    Html += "<TR><TD class='Bulle' NOWRAP ALIGN='LEFT'>";
    Html += txt_;

//-- Rajout pour la démo
    Html += "<BR><HR>Position <B>onMouseOver</B><BR>Mouse : X= " +Mouse_X +" Y= " +Mouse_Y;

Html += "</TD></TR></TABLE></TD></TR></TABLE>";
  ObjWrite  ('Bulle', Html);
  ObjShowAll('Bulle', Mouse_X +Decal_X, Mouse_Y +Decal_Y, 1000);
  bBulle= true;
  return( true);
 }
 return(false);
}
//------------------
function BulleHide(){
  ObjWrite ('Bulle', "&nbsp;");
  ObjHide  ('Bulle');
  ObjMoveTo('Bulle', 0, 0);
  bBulle= false;
  return(true);
}
//--------------------
function WhereMouse(e){
  if( NETSCAPE){
    Mouse_X = e.pageX;
    Mouse_Y = e.pageY;
  }
  else{
    Mouse_X = event.clientX +document.body.scrollLeft;
    Mouse_Y = event.clientY +document.body.scrollTop;
  }
  //-- La bulle est affichée on la MOVE
  if( bBulle)
    ObjShowAll('Bulle', Mouse_X +Decal_X, Mouse_Y +Decal_Y, 1000);
}
//== INITIALISATION ==================================
//-- Capture Souris events ---------------------------
if( NETSCAPE)
  window.captureEvents( Event.MOUSEMOVE);
document.onmousemove = WhereMouse;

//-- Création STYLE Bulle et DIV----------------------
// Nota : pour NS4 le DIV doit faire parti du document
var Html;
  //-- On met du style pour la bulle
  Html  = '<STYLE TYPE="text/css">';
  Html += '.Bulle{color:#000000;font-size:13px;font-family:Verdana;}';
  Html += '</STYLE>';
  document.write( Html);

//-- Création du DIV Bulle
  if( !NS4){
    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 --

Si vous ne savez pas comment créer le fichier gfbulle.js, demandez a recevoir le script par email, il vous sera alors envoyé en pièce jointe ! Sinon, consultez la FAQ du site.

Explications :

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 )

Les Fonctions...
  Les deux fonctions principales qui sont à votre disposition sont...
    - BulleWrite('Vous mettez votre texte ici le format HTML est accepté...')
    - BulleHide ()
  Toutes les autres fonctions de gestion sont disponibles dans le fichier gfbulle.js, un petit coup d'oeil au fichier s'impose...

Utilisation des Fonctions...
  On utilise les fonctions à partir des événements OnMouseOver et OnMouseOut des balises comme suit...
  Exemple :

    <A HREF="super_page.htm"
      OnMouseOver="BulleWrite('Vous n\'en reviendrez pas ...');"
      OnMouseOut ="BulleHide ();">
      A voir à tout prix
    </A>

Intégration dans le document...
  Pour pouvoir utiliser ces fonctions il vous suffit d'insérer la ligne...
  <SCRIPT SRC="gfbulle.js" LANGUAGE ="javascript"></SCRIPT>
  entre les balises <HEAD> et </HEAD> le standard quoi...
  That's All Folks !..

Nota :
  Les lignes ci dessous ne sont là que pour forcer l'affichage de la ScrollBar Verticale et vous permettre de tester le code...

  Promener la souris sur la page pour faire apparaître les InfoBulles....

Services email :

Je désire recevoir ce script par email
Je désire recevoir un email en cas de modification de ce script
Je désire m'abonner à la newsletter de l'éditeur JavaScript

Les annotations des visiteurs :

De BackInBiz - le 06-11-2006

La position de la bulle ne marche pas sur Netscape 7.1 avec le DOCTYPE suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;
<html xmlns="http://www.w3.org/1999/xhtml">;

De Petole Team - le 25-11-2006

Bonjour,
Il faut se reporter à la source http://www.editeurjavascript.com/scripts/scripts_navigation_3_737.php qui constitue en fait la mise à jour de celle ci, et la sauf plante de ma part cela fonctionne..

De Tedgard - le 10-04-2007

Bonjour !

Alors j'ai remarqué un petit bug au niveau du script gfbulles.js, lorsque j'applique du

onmouseover="BulleWrite('msg')"

sur des elements HTML en position:fixed, et bien le script bogue, il s'affiche tout en haut de la page, il ne s'affiche plus du tout sur les elements dont je veux voir apparaitre l'infobulle.
Je ne sais pas encore comment corrigé ce probleme.

Merci d'avance

>> Poster une annotation sur ce script

compteur gratuit
actuellement en ligne

PUBLICITE

ANNUAIRE WEBMAST.

RueDuCommerce
Rue du commerce est un site de vente high tech ultra serieux.
http://www.rueducommerce.fr/

Cat : Hardware
Voir l'annuaire webmaster

LES SCRIPTS :

78 à éditer
68 à copier/coller
247 des membres
2580 sur le web
>> Tous les scripts

LES MEMBRES :

61306 membres
7190 comptes CountUs
1721 comptes myCircle

LES FORUMS :

14 forums
39941 topics
190891 messages
>> Les forums

SONDAGE

La mini-astuce "Navigateur" du jour par chrislebouler
La fonction agrandissement de texte existe sur tous les navigateurs. Le moyen le plus universel pour l'utiliser?... Ctrl + molette centrale de la souris.
Plusieurs avantages : pour IE pas besoin de l'onglet affichage, pour les Geckos agrandissement + progressif que l'option Ctrl ++.
Proposer votre mini-astuce | Archives des mini-astuces

Pseudo :
Code :
	Se souvenir de moi