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 : 35319
Envois par mail : 322

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

compteur gratuit
actuellement en ligne

PUBLICITE

ANNUAIRE WEBMAST.

1and1
Tout simplement le leader mondial de l'hebergement ! A partir de 1 € par mois, avec des services vraiment sympas.
http://www.1and1.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 :

61324 membres
7209 comptes CountUs
1721 comptes myCircle

LES FORUMS :

14 forums
39943 topics
190893 messages
>> Les forums

SONDAGE

La mini-astuce "Divers" du jour par alex55
Lorsque vous écrivez un message dans un textarea, il se peut que vous fassiez une erreur. Sachez que le CTRL+Z est activé dans les textarea ! Très pratique au cas où vous effacez tout le texte en faisant une fausse maneuvre. Les autres CTRL+[une lettre] marchent aussi (ex: CTRL+F pour rechercher).
Proposer votre mini-astuce | Archives des mini-astuces

Pseudo :
Code :
	Se souvenir de moi