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 : 18/10/2006
Dernière modif : -
Visites de la page : 43498
Envois par mail : 692

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
//-------------------------------------------------------------
//  Mise à Jour  : 29.05.2006
//  Objet        : Compatibilité IE6 et DOCTYPE
//  -----------------------------------------------------------
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 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 ObjMoveTo( div_, x_, y_){
  var Obj = null;
  var Arg = arguments;
  if( div_){
    Obj = GetStyle( div_);
    if( Obj){
      if( Arg[1] != null) Obj.left = x_ +"px";
      if( Arg[2] != null) Obj.top  = y_ +"px";
    }
  }
}
//------------------------------------
//  Mise à Jour  : 29.05.2006
//------------------------------------
function ObjShowAll( div_, x_, y_, z_){
  var Obj = GetObjet( div_);
  var DocRef;
  var MaxX, MaxY;
  var Top,  Left;
  var Haut, 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{
      if( document.documentElement && document.documentElement.clientWidth)
        DocRef = document.documentElement;
      else
        DocRef = document.body;

with( DocRef){
        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);
}

//------------------------------------
//  Mise à Jour  : 29.05.2006
//------------------------------------
function WhereMouse(e){
  var DocRef;

if( NETSCAPE){
    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;
  }
  //-- 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.

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 alex55 - le 18-10-2006

Très bon script : l'infobulle ne peut pas être cachée par la fenêtre du navigateur.
Mais c'est un peu compliqué a mettre en place : les textes sont marqué dans le <HEAD> ! Je pense qu'une mise à jour serait sympa : pouvoir marquer le texte dans le <body> ansi que le texte de l'infobulle. Bien plus pratique ;-)

De Petole Team - le 03-11-2006

Bonjour et merci...
Il s'agit ici d'une mise à jour.
[url =http://www.editeurjavascript.com/scripts/scripts_navigation_3_656.php]pour voir les explications[/url] de la mise en oeuvre à l'intérieur du BODY...

De elKrys - le 18-01-2007

Très bon code, je me cassais justement la tête là-dessus depuis un moment.

Seul point noir, mais qui ne vient pas du script : sous IE, l'info-bulle passe en dessous des balises SELECT.

De pasondag - le 04-05-2007

Beaucoup de code pour pas grand chose.

Je rappel qu'il est possible de faire des infos-bulles simplement en html comme ceci:

<a title="votre texte">www.votresite.com</a>

.
Les avantages
1)c'est souvant plus beau
2)le texte est pris en compte par les moteurs de recherches
3)compatible avec tous les bons navigateurs

PASondag
http://www.xtremejeux.game-host.org

De peter45 - le 08-12-2010

très bon script mais pourquoi demander de recopier le script qui crée les lignes ?

>> Poster une annotation sur ce script

compteur gratuit
actuellement en ligne

PUBLICITE

ANNUAIRE WEBMAST.

GrosBill
GrosBill est un site de vente high tech serieux, disposant d'une boutique a Paris.
http://www.grosbill.com

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 :

65912 membres
4797 comptes CountUs
1839 comptes myCircle

LES FORUMS :

14 forums
40353 topics
191677 messages
>> Les forums

SONDAGE

La mini-astuce "Hebergement / Linux" du jour par caaptusss
Lorsque vous choisissez votre hébergment, ne prenez pas trop large ! 150 Mo suffisent largement pour un site qui n'a que quelques dizaines de pages ! Vous pourrez alors agrandir votre espace au fur et à mesure que vous en aurez besoin !
Proposer votre mini-astuce | Archives des mini-astuces

Pseudo :
Code :
	Se souvenir de moi