Fermer

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

Info-bulle personnalisée

Script posté par :

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

Description

Voici une info-bulle qui ne déborde pas de la page quelque soit la position du lien

Compatibilité :

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

Ce script utilise le DHTML

Chiffres :

Date de création : 5/05/2006
Dernière modif : -
Visites de la page : 31773
Envois par mail : 308

Exemple :

Pointez sur ce lien pour voir la bulle. Placez maintenant ce deuxième lien juste en bas de page et passez votre souris ici.

Le code :

Entre <BODY> et </BODY> :

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

document.write('<style type="text/css">'+
               '.rouge, A:visited.rouge, A:active.rouge {color:#494B5D; text-decoration:underline;}'+
               'A:hover.rouge {cursor:pointer; color:#CC0000; text-decoration:none;}'+
               '</style>')

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

// PARAMETRES MODIFIABLES
var delaiAffBull = 1600
var autoEffBull  = 6000
var delaiEffBull = 200
var DecalVertic  = 16
var DecalHoriz   = 6
var TailleText   = '11px'
if (ie4){
var PolicText    = 'Gautami,Square721 BT,Trebuchet MS,System,Arial,Tahoma'
}
else {
var PolicText    = 'Arial,Tahoma'
}
var policStyl    = 'normal'
var CouleurTexte = '#FFFFFF'
var CouleurFond  = '#494B5D'
var CouleurBord  = '#786654'
var CouleurOmbr  = '#000000'
var textBull     = ''
var Vitess       = 1
var Opac         = 100
var OpacOmbr     = 20
var Opac_2       = 10
var Opac_2Ombr   = .2

// 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()',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);

// DECLARATIONS
var Vt           = 0
var EffB         = 0
var larg_ecran_B = 0
var haut_ecran_B = 0
var PosHoriz     = 0
var PosVertic    = 0
var PosBullHoriz = 0
var PosBullVerti = 0
var scrollPag    = 0
var limitEcran   = 0
var limiteVert   = 0
var largBull     = 0
var razBull      = 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;
}

var cadreBull = '<table border="1" cellpadding="0" cellspacing="0"'+        // Cadre de la bulle
                ' style="border:1px solid '+CouleurBord+'; border-collapse: collapse; font-weight: '+policStyl+'; font-family: '+PolicText+'; font-size: '+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-weight: '+policStyl+'; font-family: '+PolicText+'; font-size: '+TailleText+'; color: 000000; 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;
            document.getElementById("ombrBull").innerHTML = ombreBull;
            largBull = document.getElementById("infoBull").offsetWidth;
            hautBull = document.getElementById("infoBull").clientHeight;
            limiteVert = PosBullVerti + hautBull + DecalVertic + 4;
            if (((PosBullHoriz + largBull + 4) > larg_ecran_B)&&(limiteVert > limitEcran)){PosHoriz = larg_ecran_B - (largBull + PosBullHoriz) + (PosBullHoriz - 4);PosVertic = PosVertic - 50};
            if (((PosBullHoriz + largBull + 4) > larg_ecran_B)&&(limiteVert <= limitEcran)){PosHoriz = larg_ecran_B - (largBull + PosBullHoriz) + (PosBullHoriz - 4)};
            if (((PosBullHoriz + largBull + 4)<= larg_ecran_B)&&(limiteVert > limitEcran)){PosVertic = PosVertic - 30};

document.getElementById("infoBull").style.top = PosVertic
            document.getElementById("infoBull").style.left = PosHoriz
            document.getElementById("ombrBull").style.top = PosVertic + 5
            document.getElementById("ombrBull").style.left = PosHoriz + 8
            AffichBull=setTimeout('document.getElementById("infoBull").style.visibility = "visible";document.getElementById("ombrBull").style.visibility = "visible"',delaiAffBull);
            EffacAutoBull=setTimeout('Vt=1;effacem()',autoEffBull);
            clearTimeout(EffacBull);
            }
        }
     afftext(Bull);
}

function afftext(text){
        if(text != 0){
        textBull = text
        }    
}

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

/*
pmn@ntes - 03 mars 2006
pinard.m_ _ _@_ _ _nantes.fr
*/

Si vous ne savez pas comment créer le fichier scriptBulle.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 EricM - le 05-05-2006

Sous IE, on a bien l'effacement, mais si on passe d'un lien à l'autre (dans l'ex), la bulle n'apparait pas toujours (alors qu'avec Firefox le pb ne se pose pas).
A+

>> Poster une annotation sur ce script

5 visiteurs
actuellement en ligne

PUBLICITE

ANNUAIRE WEBMAST.

Wedoo
La plus connue des top-lists.
http://fr.wedoo.com

Cat : Cercles de sites
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