Fermer

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

Info-bulle paramètrable

Script posté par :

pmn@ntes
Vous aussi, postez vos scripts en cliquant ici.

Description

Voici un script pour afficher le descriptif d'un lien dans la "Barre de status" et une "Info-bulle" qui reste cadrée dans la page, en une seule fois.

Compatibilité :

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

Chiffres :

Date de création : 7/10/2005
Dernière modif : -
Visites de la page : 47465
Envois par mail : 559

Exemple :

Pointez sur ce lien pour voir la bulle en positionnement normal.
Un deuxième lien est placé plus à droite, passez votre souris ici pour vous permettre de constater que la bulle reste dans le cadre de la page.
Placez cette ligne ___________ en bas de page et passez votre souris ici pour constater que la bulle reste dans le cadre de la page.

Le code :

Entre <HEAD> et </HEAD> :

Entre <BODY> et </BODY> :

<a style="cursor:pointer" onmouseover="affichBulle('Regardez l\'info-bulle et la barre de status...');return(true)" onmouseout="affichBulle(0)" onclick="affichBulle(0)" href="nouvelle_page_66-4.htm">Pointez sur ce lien</a> pour voir la bulle en positionnement normal. <br>
Un deuxième lien est placé&nbsp;plus à droite, <a class=rouge style="cursor:pointer" onmouseover="if(ie4){affichBulle('Gardez le doigt sur ce lien et observez bien, la position de la bulle sur la page et son style d\'effacement...');return(true)};if(ns6){affichBulle('Sans Internet Explorer vous ne pouvez pas voir l\'effet à l\'effacement, mais observez bien le positionnement de la bulle...');return(true)}" onmouseout="affichBulle(0)" onclick="affichBulle(0)" href=#>passez votre souris ici</a> pour vous permettre de constater que la bulle reste dans le cadre de la page.<br>
Placez cette ligne ___________ en bas de page et <a class=rouge style="cursor:pointer" onmouseover="affichBulle('Observez bien le positionnement de la bulle...');return(true)" onmouseout="affichBulle(0)" onclick="affichBulle(0)" href=#>passez votre souris ici</a> pour constater que la bulle reste dans le cadre de la page.

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

// PARAMETRES MODIFIABLES
var delaiAffBull = 2000
var delaiAffStat = 900
var autoEffBull  = 9000
var delaiEffBull = 200
var delaiEffStat = 200
var DecalVertic  = 16
var DecalHoriz   = 6
var TailleText   = 'font-size: 11px'  
var PolicText    = 'Tahoma,Arial'     
var CouleurTexte = '#494B5D'          
var CouleurFond  = '#FDF1B0'          
var CouleurBord  = '#786654'
var CouleurOmbr  = '#000000'

// PARAMETRES A NE PAS MODIFIER
var AffichBull=setTimeout('document.getElementById("infoBull").style.visibility = "visible";document.getElementById("ombrBull").style.visibility = "visible"',delaiAffBull);
clearTimeout(AffichBull);
var EffacBull=setTimeout('Vt=2;effacem()',delaiEffBull);
clearTimeout(EffacBull);
var EffacAutoBull=setTimeout('Vt=1;effacem();window.status=""',autoEffBull);
clearTimeout(EffacAutoBull);
var tempo=setTimeout('if(Vt==1)Opac=Opac-3;OpacOmbr=OpacOmbr-3;if(Vt==2)Opac=Opac-8;OpacOmbr=OpacOmbr-8;effacem()',Vitess/1000);
clearTimeout(tempo);
var AffStat=setTimeout('window.status=textBull',delaiAffStat);
clearTimeout(AffStat);

// DECLARATIONS
var textBull     = ''
var Vitess       = 1
var Opac         = 100
var OpacOmbr     = 20
var Opac_2       = 10
var Opac_2Ombr   = .2
var Vt           = 0
var EffB         = 0
var larg_ecran_B = 0
var haut_ecran_B = 0
var Long         = 0
var limiteH      = 0
var limiteV      = 0
var retourB      = 0
var PosHoriz     = 0
var PosVertic    = 0
var PosBullHoriz = 0
var PosBullVerti = 0
var scrollPag    = 0
var limiteBull   = 0

var ns4=document.layers?1:0
var ie4=document.all?1:0
var ns6=document.getElementById&&!document.all?1:0

if(navigator.appName.substring(0,3) == "Net")
	document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = get_mouse;                                            // Capture de la position de la souris

function get_mouse(e){                                                       // Transfert de la position de la souris
	x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
	y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
	    PosBullHoriz = x;
            PosBullVerti = y;
}

function affichBulle(Bull){                                                  // Affichage de la bulle
        larg_ecran_B = document.body.clientWidth;                            // Recadrage dans l'écran
        haut_ecran_B = document.body.clientHeight;
        scrollPag = document.body.scrollTop;
        if (ie4)Long = (Bull.length * (60 / 13)) + 26; 
        if (ns6)Long = (Bull.length * (60 / 13)) + 50;                       // (50) A adapter selon de la police 
        limiteH = PosBullHoriz + Long + DecalHoriz;
        limiteV = scrollPag + haut_ecran_B;
        retourB = limiteH - larg_ecran_B;
        PosHoriz = PosBullHoriz + DecalHoriz;
        PosVertic = PosBullVerti + DecalVertic;
        limiteBull = PosBullVerti + 30;
        if (limiteH > larg_ecran_B)PosHoriz = PosHoriz - retourB;
        if (limiteBull > limiteV)PosVertic = PosVertic - 40;
        if (Bull == 0){                                                      // Test de la présence du texte
        clearTimeout(AffichBull);
        clearTimeout(EffacAutoBull);
        clearTimeout(AffStat);
        EffacBull=setTimeout('Vt=2;effacem()',delaiEffBull);
        setTimeout('ChxLien=0',300);
        }
        else if (Bull != 0){var textBull = Bull;                             // Récuperation du texte
        if (document.getElementById){document.getElementById("infoBull").style.visibility = "hidden";document.getElementById("ombrBull").style.visibility = "hidden";}
        Opac = 100;OpacOmbr = 20
var cadreBull = '<table border="1" cellpadding="0" cellspacing="0"'+         // Cadre de la bulle
                ' style="border:1px solid '+CouleurBord+'; border-collapse: collapse; font-family: '+PolicText+'; '+TailleText+'; color: '+CouleurTexte+'; margin-left: 8; filter: alpha(opacity='+Opac+'); -moz-opacity: '+Opac_2+'"><tr><td style="border-style:solid; border-width:1px; margin-left: 8;" bgcolor="'+CouleurFond+'" bordercolor="'+CouleurBord+'" Width=><nobr>&nbsp; '+textBull+' &nbsp;</nobr></td></tr></table>'
var ombreBull = '<table border="0" cellpadding="0" cellspacing="0"'+         // Ombre de la bulle
                ' style="border:0px solid '+CouleurBord+'; border-collapse: collapse; font-family: '+PolicText+'; '+TailleText+'; color: '+CouleurTexte+'; margin-left: 8; filter: alpha(opacity='+OpacOmbr+'); -moz-opacity: '+Opac_2Ombr+'"><tr><td style="border-style:solid; border-width:0px; margin-left: 8;" bgcolor="'+CouleurOmbr+'" bordercolor="'+CouleurBord+'" Width=><nobr>&nbsp; '+textBull+'&nbsp;</nobr></td></tr></table>'

if ((document.getElementById) && (document.getElementById("infoBull").style.visibility != "visible")){
            document.getElementById("infoBull").innerHTML = cadreBull;      // Affichage du cadre avec le texte 
            document.getElementById("ombrBull").innerHTML = ombreBull;
            AffichBull=setTimeout('document.getElementById("infoBull").style.visibility = "visible";document.getElementById("ombrBull").style.visibility = "visible"',delaiAffBull);
            document.getElementById("infoBull").style.top = PosVertic;      // position verticale
            document.getElementById("infoBull").style.left = PosHoriz;      // Position horizontale
            document.getElementById("ombrBull").style.top = PosVertic + 5;  // position verticale
            document.getElementById("ombrBull").style.left = PosHoriz + 8;  // Position horizontale
            EffacAutoBull=setTimeout('Vt=1;effacem();window.status=""',autoEffBull);
            clearTimeout(EffacBull);
            }
        }
        afftextStat(Bull);                                                  // Transfert du texte pour la barre de status
}

function afftextStat(text){                                                 // Affichage du texte de la barre de status
        if(text != 0){textBull = text;
        AffStat=setTimeout('window.status=textBull',delaiAffStat)}
        else {setTimeout("window.status=''",delaiEffStat)}
}

function effacem(){
var cadreBull = '<table border="1" cellpadding="0" cellspacing="0"'+        // Cadre de la bulle
                ' style="border:1px solid '+CouleurBord+'; border-collapse: collapse; font-family: '+PolicText+'; '+TailleText+'; color: '+CouleurTexte+'; margin-left: 8; filter: alpha(opacity='+Opac+'); -moz-opacity: '+Opac_2+'"><tr><td style="border-style:solid; border-width:1px; margin-left: 8;" bgcolor="'+CouleurFond+'" bordercolor="'+CouleurBord+'" Width=><nobr>&nbsp; '+textBull+' &nbsp;</nobr></td></tr></table>'
var ombreBull = '<table border="0" cellpadding="0" cellspacing="0"'+        // Ombre de la bulle
                ' style="border:0px solid '+CouleurBord+'; border-collapse: collapse; font-family: '+PolicText+'; '+TailleText+'; color: '+CouleurTexte+'; margin-left: 8; filter: alpha(opacity='+OpacOmbr+'); -moz-opacity: '+Opac_2Ombr+'"><tr><td style="border-style:solid; border-width:0px; margin-left: 8;" bgcolor="'+CouleurOmbr+'" bordercolor="'+CouleurBord+'" Width=><nobr>&nbsp; '+textBull+'&nbsp;</nobr></td></tr></table>'

document.getElementById("infoBull").innerHTML = cadreBull
        document.getElementById("ombrBull").innerHTML = ombreBull
        if (ie4) tempo=setTimeout('if(Vt==1)Opac=Opac-3;OpacOmbr=OpacOmbr-3;if(Vt==2)Opac=Opac-8;OpacOmbr=OpacOmbr-8;effacem()',Vitess/1000)
        else {document.getElementById("infoBull").innerHTML = "";document.getElementById("ombrBull").innerHTML = "";}           // A vous d'adapter l'éffacement en douceur pour Netscape, Firefox, etc...
        if (Opac <= 0) {
        clearTimeout(tempo)
        document.getElementById("infoBull").innerHTML = ""
        document.getElementById("ombrBull").innerHTML = ""
        }
}

document.write('<DIV id=infoBull STYLE="position: absolute;z-Index:10"></DIV><DIV id=ombrBull STYLE="position: absolute;z-Index:9"></DIV>')

Si vous ne savez pas comment créer le fichier Bulle.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 pasondag - le 09-10-2005

Je veux pas dire, mais c'est pas plus simple d'écrire :

<a href="#" title="essai">un lien</a>

En plus ca marche sur tout les navigateurs !

De webmathis2 - le 05-11-2005

marche pas sous galeon

De perfect - le 04-11-2006

ton code tout simple marche tres bien je te l'accorde, mais pas sous mozilla ;)

De hayat - le 14-01-2007

qu'est ce que ça veut dire enregistrer bulle.js dans le même répértoire que votre page

De agaga - le 25-10-2007

Je voudrais féliciter l'auteur de ce script. en effet, j'ai parcouru le web, j'en ai trouver pas mal, mais toujours compliquée et pas facile à mettre en oeuvre. Encore bravo.
Et ce serait merveilleux de pouvoir mettre une "vignette" photo en infobulle ! Je ne désespère pas de trouver la solution sur ce site.

De pompomp - le 15-06-2008

Salut, j'aime beaucoup ton code. Il marche impecablement sous opera 9.5 mais sous IE 7 et Firefox 2, les bulles restent coincées en haut à gauche de la fenêtre. As tu une explication peut-être?

>> Poster une annotation sur ce script

compteur gratuit
actuellement en ligne

PUBLICITE

ANNUAIRE WEBMAST.

Cegetel
Fournisseur d'acces ADSL
http://www.cegetel.fr/

Cat : Haut débit
Voir l'annuaire webmaster

LES SCRIPTS :

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

LES MEMBRES :

61312 membres
7202 comptes CountUs
1721 comptes myCircle

LES FORUMS :

14 forums
39941 topics
190891 messages
>> Les forums

SONDAGE

La mini-astuce "HTML / CSS" du jour par fred
L'attribut media vous permet de définir une feuille de style différente selon le média de sortie : affichage dans un navigateur (media="screen"), impression (media="print"), impression en braille (media="embossed"), etc. Syntaxe : <link rel="stylesheet" media="screen" href="style.css">
Proposer votre mini-astuce | Archives des mini-astuces

Pseudo :
Code :
	Se souvenir de moi