PC SOFT

PROFESSIONAL NEWSGROUPS
WINDEVWEBDEV and WINDEV Mobile

Home → WEBDEV 2024 → Overlib
Overlib
Started by Pascal, Jun., 13 2005 2:05 PM - 5 replies
Posted on June, 13 2005 - 2:05 PM
Voilà, j'ai un peu galéré avec overlib au départ, alors j'ai fait une sorte de petit TUTO pour que ceux qui galèrent galèreront moins que moi :p




Utilisation d'Overlib avec Webdev (sans alias sous apache):

/!\ projet = le nom de votre projet

1) Créer le répertoire "overlib" dans "projet_WEB" en y plaçant "overlib.js"

2) Dans la page où il y aura la bulle d'aide, collé ce code (Description de la page/Avancé/Code

HTML):


<script type="text/javascript" SRC="/PROJET_WEB/overlib/overlib.js"></SCRIPT>
<body>
<div id="overDiv" style="position:absolute; visibility:hidden;z-index:1000;">
</div>
</body>


3) Créer 3 procédures globales navigateurs, en JavaScript (chaque procédure avec le nom de votre fonction):

function AfficheBulleAvecImage(P_Image,P_Texte)
{
overlib("<TD><IMG SRC='/overlib_WEB/Images/"+P_Image+"'></IMG></TD><TD width=8>\
</TD><TD valign='middle'

class='Arial8'>"+P_Texte+"</TD>",FGCOLOR,"#FFFFFF",BGCOLOR,"#000000")
}

//Si on veut toujours garder le style de la bulle pour tout le site
function AfficheBulleSimple(P_Texte)
{
overlib(P_Texte,FGCOLOR,"#FFFFE7",BGCOLOR,"#000000",BORDER,"1",TEXTFONT,"Arial",TEXTSIZE,"8pt",TEXTCOLOR,"#000000");
}

ou

//Si on veut pouvoir changer le style de la bulle
function AfficheBulleSimple(P_Texte,Couleur_Fond,Couleur_Bordure,Taille_Bordure,Couleur_Texte,Taille_Texte,Style_Texte)
{
overlib(P_Texte,FGCOLOR,Couleur_Fond,BGCOLOR,Couleur_Bordure,BORDER,Taille_Bordure,TEXTFONT,Style_Texte,TEXTSIZE,Taille_Texte,TEXTCOLOR,Couleur_Texte);
}



function EnleveBulle()
{
nd();
}


4) ONMOUSEOVER / ONMOUSEOUT (en JavaScript)


Quand vous survolez l'objet (ONMOUSEOVER), collez ce texte:
//le Style de la bulle pour tout le site
P_Texte = "Voici une bulle d'aide"
AfficheBulleSimple(P_Texte)

ou

//le style de la bulle modifiable
P_Texte = "Ceci est le 2ème essai"
Couleur_Fond = "#FFFFE7"
Couleur_Bordure = "#000000"
Taille_Bordure = "1"
Couleur_Texte = "#000000"
Taille_Texte = "8pt"
Style_Texte = "Arial"
AfficheBulle(P_Texte,Couleur_Fond,Couleur_Bordure,Taille_Bordure,Couleur_Texte,Taille_Texte,Style_Texte)


Quand le survol doit s'enlever (ONMOUSEOUT), collez ce texte:
EnleveBulle()


Bien sur, vous pouvez rajouter pleins d'options...
Voici un site très bien fait:
<a href="http://home.nordnet.fr/~amoreaux/html/overlib_francais/reference_f.htm">http://home.nordnet.fr/~amoreaux/html/overlib_francais/reference_f.htm
Posted on June, 13 2005 - 5:23 PM
merci bcp pour ce tuto,

c tres pratique
Posted on June, 13 2005 - 11:34 PM
"Pascal" <ginglinger@iuthaguenau.u-strasbg.fr> a écrit dans le message de
news: 42ad4e0e$1@news.pcsoft.fr...

Voilà, j'ai un peu galéré avec overlib au départ, alors j'ai fait une

sorte de petit TUTO pour que ceux qui galèrent galèreront moins que moi :p




Utilisation d'Overlib avec Webdev (sans alias sous apache):

/!\ projet = le nom de votre projet

1) Créer le répertoire "overlib" dans "projet_WEB" en y plaçant

"overlib.js"

2) Dans la page où il y aura la bulle d'aide, collé ce code (Description

de la page/Avancé/Code

HTML):


<script type="text/javascript"

SRC="/PROJET_WEB/overlib/overlib.js"></SCRIPT>
<body>
<div id="overDiv" style="position:absolute;

visibility:hidden;z-index:1000;">
</div>
</body>


3) Créer 3 procédures globales navigateurs, en JavaScript (chaque

procédure avec le nom de votre fonction):

function AfficheBulleAvecImage(P_Image,P_Texte)
{
overlib("<TD><IMG SRC='/overlib_WEB/Images/"+P_Image+"'></IMG></TD><TD

width=8>\
</TD><TD valign='middle'

class='Arial8'>"+P_Texte+"</TD>",FGCOLOR,"#FFFFFF",BGCOLOR,"#000000")
}

//Si on veut toujours garder le style de la bulle pour tout le site
function AfficheBulleSimple(P_Texte)
{

overlib(P_Texte,FGCOLOR,"#FFFFE7",BGCOLOR,"#000000",BORDER,"1",TEXTFONT,"Ari
al",TEXTSIZE,"8pt",TEXTCOLOR,"#000000");
}

ou

//Si on veut pouvoir changer le style de la bulle
function

AfficheBulleSimple(P_Texte,Couleur_Fond,Couleur_Bordure,Taille_Bordure,Coule
ur_Texte,Taille_Texte,Style_Texte)
{

overlib(P_Texte,FGCOLOR,Couleur_Fond,BGCOLOR,Couleur_Bordure,BORDER,Taille_B
ordure,TEXTFONT,Style_Texte,TEXTSIZE,Taille_Texte,TEXTCOLOR,Couleur_Texte);
}



function EnleveBulle()
{
nd();
}


4) ONMOUSEOVER / ONMOUSEOUT (en JavaScript)


Quand vous survolez l'objet (ONMOUSEOVER), collez ce texte:
//le Style de la bulle pour tout le site
P_Texte = "Voici une bulle d'aide"
AfficheBulleSimple(P_Texte)

ou

//le style de la bulle modifiable
P_Texte = "Ceci est le 2ème essai"
Couleur_Fond = "#FFFFE7"
Couleur_Bordure = "#000000"
Taille_Bordure = "1"
Couleur_Texte = "#000000"
Taille_Texte = "8pt"
Style_Texte = "Arial"

AfficheBulle(P_Texte,Couleur_Fond,Couleur_Bordure,Taille_Bordure,Couleur_Tex
te,Taille_Texte,Style_Texte)


Quand le survol doit s'enlever (ONMOUSEOUT), collez ce texte:
EnleveBulle()


Bien sur, vous pouvez rajouter pleins d'options...
Voici un site très bien fait:
<a

href="http://home.nordnet.fr/~amoreaux/html/overlib_francais/reference_f.htm
">http://home.nordnet.fr/~amoreaux/html/overlib_francais/reference_f.htm>

Bravo et merci
C'a fonctionne au poil...
Posted on July, 20 2005 - 7:20 PM
J'ai utilisé overlib sur un autre de mes sites et ca marche nickel.
Sur le site actuel, j'essaie d'utiliser overlib sur une page AWP.
J'ai coché les mêmes options au niveau de Projet/Description/Avancé et
j'ai mis dans l'entête de la page (Description de la page/Avancé) les
deux lignes
<script language="JavaScript" src="/Overlib/Overlib.js"><!-- overLIB
(c) Erik Bosrup --></script>
<body><div id="overDiv" style="position:absolute; visibility:hidden;
z-index:1000;"></div></body>

Dans le répertoire FR où se trouve la page AWP, j'ai créé un sous
répertoire Overlib avec le Overlib.js dedans (comme pour mon autre
site)

Rien à faire, ca ne veut pas fonctionner, j'ai tjs des erreurs sur la
page. Ligne 24 car 2 , Objet attendu!
Ca correspond à la ligne

function _LIEN1_MOV()
{
AfficheBulleSimple("Le texte du super heros"); //CETTE LIGNE
}

Au secours ...

--
Bon développement à tous
Christian

cciochir@ _ at _ cmii.fr
Posted on July, 20 2005 - 8:12 PM
"Christian" <cciochir_at_@cmii.fr> a écrit dans le message de news:
mn.a4107d57269fe503.22726@cmii.fr...

J'ai utilisé overlib sur un autre de mes sites et ca marche nickel.
Sur le site actuel, j'essaie d'utiliser overlib sur une page AWP.
J'ai coché les mêmes options au niveau de Projet/Description/Avancé et
j'ai mis dans l'entête de la page (Description de la page/Avancé) les
deux lignes
<script language="JavaScript" src="/Overlib/Overlib.js"><!-- overLIB
(c) Erik Bosrup --></script>
<body><div id="overDiv" style="position:absolute; visibility:hidden;
z-index:1000;"></div></body>

Dans le répertoire FR où se trouve la page AWP, j'ai créé un sous
répertoire Overlib avec le Overlib.js dedans (comme pour mon autre
site)

Rien à faire, ca ne veut pas fonctionner, j'ai tjs des erreurs sur la
page. Ligne 24 car 2 , Objet attendu!
Ca correspond à la ligne

function _LIEN1_MOV()
{
AfficheBulleSimple("Le texte du super heros"); //CETTE LIGNE
}

Au secours ...

--
Bon développement à tous
Christian

cciochir@ _ at _ cmii.fr



Verifie pour ta page en cours que
Description... Avancé...
Personnalisé : Cocher Factoriser les attributs...
@+
Posted on July, 20 2005 - 8:23 PM
J'ai trouvé ce qui n'allait pas:
Dans la description de la page il fallait mettre les 2 points ..
<script language="JavaScript" src="../Overlib/Overlib.js">
<body><div id="overDiv" style="position:absolute; visibility:hidden;
z-index:1000;"></div></body>

Les procédures AfficheBulleSimple et enleveBulle il faut les définir en
tant que procédures locales de la page, et non pas globales au projet.
J'imagine que ceci est du au fait qu'on travaille en AWP !

Voilà, si ca peut aider d'autres personnes ...

--
Bon développement à tous
Christian

cciochir@ _ at _ cmii.fr