portail du scripts- OverLib, la "Rolls" des infobulles.

OverLib, la "Rolls" des infobulles

La célèbre OverLib. Assurément la plus belle des infobulles mais pas facile à configurer.

Vous pouvez faire des infobulles sans titre (caption) ou avec un titre .
Vous pouvez aussi la faire apparaître à gauche. Vous pouvez la rendre adhésive d'un simple clic de souris. Et bien entendu vous pouvez y mettre tout le texte que vous souhaitez. Extra non ?

Ce script Overlib a été créé par Erik Bosrup. Son copyright est un modèle de l'esprit d'Internet : "Give me credit where credit is due and I'll be happy. Free to use - don't abuse".

http://www.bosrup.com/ pour avoir la version la plus récente. Celle-ci date du 17/01/1999.
Téléchargez la version originale (en anglais) : overlib.zip

Etape 1 :
Téléchargez les deux fichiers suivants et placez les dans le même répertoire que votre site.

overlib_fr.js
overlib.css

L'avantage de faire appel à des fichiers de Javascript et de Feuilles de Style externes, est que l'on pourra
bénéficier de l'effet des infobulles à chaque page sans devoir retaper tout le code .

Etape 2 : Ajouter juste après la balise <BODY> :

Etape 3 : Ajouter après la balise </HEAD> et avant la balise <BODY> :

Etape 4 : Ajouter juste après la balise <BODY> [facultatif]

Ceci permet de passer outre les valeurs définies par défaut dans le Javascript externe.

var width = "250";
var border = "3";
var offsetx = 2;
var offsety = 2;
var fcolor = "#CCFFCC";
var backcolor = "#339933";
var textcolor = "#000000";
var capcolor = "#FFFFFF";
var closecolor = "#99FF99";

Largeur de l'infobulle en pixels.
Epaisseur de bord en pixels.
Retrait horizontal en pixels
Retrait vertical en pixels
Couleur d'arrière-plan principale.
Couleur du bord et du titre (caption).
Couleur du texte de l'infobulle.
Couleur du texte du titre (caption)
Couleur de "Close" avec l'option "Adhésif"

Etape 5 : Faire vos liens dans le body pour les mots pour lesquels vous souhaitez une infobulle.

--- Infobulle élémentaire sans l'effet "adhésif" (Sticky) ---

La syntaxe générale de votre lien (qui générera l'infobulle) sera :

<A href="..." onMouseOver="xyz('Texte','Titre'); return true;" onMouseOut="nd(); return true;">Lien</A>

où x sera égal à d ou s ; d pour Dummy (infobulle élémentaire) ou s pour Sticky (infobulle adhésive).
où y sera égal à c, l ou r ; soit la position de l'infobulle avec c pour center, l pour left (gauche) et r pour right (droit).
où z sera égal à s ou c ; s pour infobulle simple et c pour infobulle avec titre [caption].

Exemples :

<A href="..." onMouseOver="drc('Texte','Titre'); return true;" onMouseOut="nd(); return true;">lien</A>
Cette ligne de code présentera une infobulle élémentaire (le d), qui se positionnera à droite (le r) et qui aura un titre (le c).

<A href="..." onMouseOver="drs('Texte'); return true;" onMouseOut="nd(); return true;">lien</A>
Ceci présentera un pop-up élémentaire (le d), qui se positionnera à droite (le r) et qui sera sans titre (le s).

--- Infobulle avec l'effet 'adhésif" (Sticky) ---

Il faut encore ajouter l'événement onClick="xyz('Texte','Titre'); return false;", soit

Ainsi :