OverLIB - Utilisation

Version imprimable

20/11/2006, 09h52
Space Cowboy

OverLIB - Utilisation

Bonjour,

Je chercher à afficher des fenêtre au survol, auparavant, j'utiliser ca. J'aimerais passer à OverLIB qui, il parait donne le même résultat, mais en plus mieux ...

Page d'acceuil du site officiel.

Quand on télécharge le package, il y a plusieur fichier *.js ...
J'aimerais juste la fonction des fenêtre au survol ... et des pop-up, il s'avère que c'est que je souhaiter faire ensuite.
Ma fonction pop-up donne pour le moment un pop-up de taille fixe, pas génial ...

Donc, pour utiliser les fenêtres au survol, il faut juste inclure overlib.js et appelé le code ci ? :

Code:

<a href="features.html" onmouseover="return overlib('More example of what overLIB looks like.');" onmouseout="return nd();">all the features</a>

Pour avec un cation side en haut :

Code:

<a href="javascript:void(0);" onmouseover="return overlib('Clicking here does nothing!', CAPTION, 'Insert witty caption here...');" onmouseout="return nd();">navigational help</a>

Et pour les pop-up en plus, overlib_centerpopup.js ?

Ou, je ferais mieux d'utiliser Cool DHTML Tooltip car il est plus léger et trouver autrechose pour le pop-up ?
Parceque, pour faire les exemples la, ca ne doit pas être super leger ...
20/11/2006, 12h54
Mr N.

Tu auras plus de chances d'avoir une réponse dans le forum javascript ;)

Sinon j'utilse l'attribut title="" et ça marche nickel :)
20/11/2006, 13h55
Space Cowboy

Ben, ca parle de overlib, et comme il n'y avait de sujet traitant de cette librairie qui a l'air quand même uber connus ...

title="" c'est pas une méthode pour faire des fenêtres au survol de manière propre.
A terme, j'aimerais afficher de véritable structure dans ces fenêtre, images, tableaux etc ...

Cool la téléportation.
20/11/2006, 14h00
SpaceFrog

overlib est une vréie usine à gaz pour pas grand chose en fin de compte ...
il faut avoir la lib sur le serveur et faire un lien comme pour un js externe

Code:

<script type='text/javascript' src="lienverlib"></script>

sinon regarde plutot du coté des info bulles css ...

Citation:

Envoyé par SpaceFrog

overlib est une vréie usine à gaz pour pas grand chose en fin de compte

Ok ... je jette.

Je vais continuer d'utiliser DHTML tooltip

D'ailleur j'ai eut le temps de faire une petite fonction, car c'est difficile de gerer les quote et double quote ...

La fonction:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function ddrivetip($texte='',$couleur='',$taille='') { if ($couleur=='') $couleur=='white'; if ($taille=='') $taille==250; $texte = htmlentities($texte, ENT_QUOTES); $part1 = ' onMouseover="ddrivetip('; //$part2 = "'" .$texte. "')"; $part2 = "'" .$texte. "','" .$couleur. "','" .$taille. "')"; $part3 = '"; onMouseout="hideddrivetip()";'; return $part1.$part2.$part3; }
Ce n'est pas très joli à voir, mais au moins avec ca, je peut mettre ce que je veut sans être embeter par les guillemets.

Utilisation :
Code:

1 2 3 $texte="Un petit hexagone plat de couleur ivoire. On dirait que la surface de l'objet l'objet a subi les ."; $couleur='yellow'; $taille='300'; echo '<a href="http://google.Fr"' .ddrivetip($texte,$couleur,$taille). '>lien affiché!!!</a>';
Si on souhaite faire la même infobulle dans partout sur le site, il faut modifier le css et ne mettre que :
Code:

1 2 $texte = "Ohoh l'objet hohoojkdf hdkfgdfh "; echo '<a href="http://google.Fr"' .ddrivetip($texte). '>Lien a afficher!!!</a>';
Si on veut mettre des " dans la chaine, il faut faire l'inverse dans l'enregistrement de la chaine.

Code:

$texte = 'Ohoh "l\'objet hohoojkdf hd"kfgdfh';

L'idéale étant d'afficher la chaine de texte directement depuis une base de données.

Code:

echo '<a href="http://google.Fr"' .ddrivetip($data['texte']). '>Lien a afficher!!!</a>';

plus simple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<script language="Javascript">
function showinfo(Haut,Gauche,Htr,Lgr,Texte)
{
 Haut=parseInt(Haut) - (parseInt(Htr)* 0.1);
 Gauche=parseInt(Gauche) + parseInt(Lgr) +10 ;
 var InfoBulle = document.getElementById('infobulle')
 InfoBulle.style.top= Haut;
 InfoBulle.style.left= Gauche;
 InfoBulle.innerHTML= Texte;
 InfoBulle.style.visibility= 'visible';
}
</script>
</head>
<body>
<div id="infobulle" style="position: absolute; padding:5; font-family: verdana; font-size:10; top:0;left:0; background-color:yellow; border: solid 1;  visibility:hidden; width:80; height:100; z-index:2; overflow:wrap;"></div>
 
<div id="image1" style="position: absolute; top:200; left:150; height:189; width:220;border:0;background-color:green" onmouseover="showinfo(this.style.top,this.style.left,this.style.height,this.style.width,'Ici \<br \/\> je colles un premier texte d\'explication ou d\'aide sur l\'objet');" onmouseout="document.getElementById('infobulle').style.visibility= 'hidden';" >coucou</div>
<div id="image2" style="position: absolute; top:100; left:150; height:89; width:100;border:0;background-color:red" onmouseover="showinfo(this.style.top,this.style.left,this.style.height,this.style.width,'Ici je colles un premier texte d\'explication ou d\'aide sur l\'objet');" onmouseout="document.getElementById('infobulle').style.visibility= 'hidden';" >coucou</div>
<div id="image2" style="position: absolute; top:250; left:150; height:200; width:50;border:0;background-color:blue" onmouseover="showinfo(this.style.top,this.style.left,this.style.height,this.style.width,'Ici je colles un premier texte d\'explication ou d\'aide sur l\'objet');" onmouseout="document.getElementById('infobulle').style.visibility= 'hidden';" >coucou</div>
 
<div style="height:50px; width:50px;background-color:pink;bottom:0;" title="hello&#013hello2">dsfqs</div>
</body>
 
</html>

20/11/2006, 15h57
Space Cowboy

Je cherche quelque chose qui "collerais" au curseur, pour bouger avec le curseur.

Par contre mon uber fonction ne fonctionne pas ....
http://img463.imageshack.us/img463/1...nstitreac1.png
pourtant ...
http://img369.imageshack.us/img369/7...nstitreyd2.png

On en peut pas mettre des ' et des "" en même temps dans en chaine de caractères sans devoir mettre \ devant ...
20/11/2006, 16h51
Matthieu2000

-> php
addslash
20/11/2006, 16h55
SpaceFrog

autrement dit échapper l'apostrophe ...

Citation:

Envoyé par Matthieu2000

-> php
addslash

Ouais, en fait j'utilise ca :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function quote_smart($value) { // quote_smart if (get_magic_quotes_gpc()) $value = stripslashes($value); // Protection si ce n'est pas un entier if (!is_numeric($value)) $value = mysql_real_escape_string($value); return $value; }
Mais j'ai vaguement espéré ne pas avoir à m'en servir...