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 : 32329
Envois par mail : 642

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

>> Poster une annotation sur ce script

8 visiteurs
actuellement en ligne

PUBLICITE

ANNUAIRE WEBMAST.

Infomaniak
Un hebergeur Suisse de qualité à partir de 7.50 € / mois.
http://www.infomaniak.fr/

Cat : Hebergement web
Voir l'annuaire webmaster

LES SCRIPTS :

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

LES MEMBRES :

56132 membres
8374 comptes CountUs
1541 comptes myCircle

LES FORUMS :

14 forums
39396 topics
189315 messages
>> Les forums

SONDAGE

La mini-astuce "Divers" du jour par caaptusss
Outlook express et Office recelle une option très utile : Les règles de messages. Elles vous permettent lorsque vous recevez beaucoup de messages d'un seul expéditeur, de les classer dans des dossiers prédéfinis ou que vous avez créé. Utile lorsque l'on veux s'y retrouver dans les mails ;-)
Proposer votre mini-astuce | Archives des mini-astuces

Pseudo :
Code :
	Se souvenir de moi