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 : 40946
Envois par mail : 527

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

9 visiteurs
actuellement en ligne

PUBLICITE

ANNUAIRE WEBMAST.

Alice
En rachetant plein de concurents, Alice est devenu un grand nom d'Internet.
http://abonnement.alicead...

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 :

56132 membres
8373 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