Discussion :

[Space Cowboy]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 ...

[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

[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.

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

[Space Cowboy]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

$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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[SpaceFrog]

plus simple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[Space Cowboy]

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

Par contre mon uber fonction ne fonctionne pas ....

pourtant ...


On en peut pas mettre des ' et des "" en même temps dans en chaine de caractères sans devoir mettre \ devant ...

[Matthieu2000]

-> php
addslash

[SpaceFrog]

autrement dit échapper l'apostrophe ...

[Space Cowboy]

-> php
addslash

Ouais, en fait j'utilise ca :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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...