InfoBulle

Version imprimable

InfoBulle

Salut,

J'ai téléchargé un script d'info bulle qui marche très bien tel quel si je touche à rien, mais dès que je le place dans mon contexte, il me donne l'erreur: tooltiptext à la valeur Null ou est indéfini.

Voila le code que j'ai:

entre <head>

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
26
27
28
<script type="text/javascript">
var nav = (document.layers);
var iex = (document.all);
var tooltiptext = (nav) ? document.tooltip : tooltip.style;
if (nav) document.captureEvents(Event.mousemove);
document.onmousemove = mousepos;
function msgpop(msg) {
	var content ="<table width=msg.Length border=0 cellpadding=1 cellspacing=0 bgcolor=white><tr><td><table width=100% border=0 cellpadding=1 cellspacing=0 bgcolor=lightyellow><tr><td><center>"+msg+"</center></span></td></tr></table></td></tr></table>";
	if (nav) {
	   tooltiptext.document.write(content);
	   tooltiptext.document.close();
	   tooltiptext.visibility = "visible";
	  }
	else if (iex) {
	   document.all("tooltip").innerHTML = content;
	   tooltiptext.visibility = "visible";
	  }
}
function mousepos(pos) {
  var x = (nav) ? pos.pageX : event.x+document.body.scrollLeft;
  var y = (nav) ? pos.pageY : event.y+document.body.scrollTop;
  tooltiptext.left = x-30;tooltiptext.top = y+20;
}
 
function killtip() {
	tooltiptext.visibility = "hidden";
}
</script>

dans body

Code:

1
2
<div id="tooltip" class="class1">&nbsp;</div>
<a href="#" onmouseover="javascript:msgpop('&nbsp;réseau fibreux déterminant entre autre la forme de la cellule&nbsp;');" onmouseout="javascript:killtip();">cytosquelette</a>

Dans mon fichier css j'ai bien class1 de défini.
Je ne vois pas l'erreur!
Sous FireFox il me dis même: erreur d'analyse pour la valeur "left" et "top"

Merci à vous[/code]

17/01/2006, 22h07
siddh

a quelle ligne l'erreur ?
18/01/2006, 15h36
Anduriel

Alors je n'ai porté aucun modification et j'ai une autre erreur avec Mozilla:
tooltip est indéfini et tooltiptext n'a pas de propriété (la conséquence d'ailleur). C'est respectivement ligne 9 et ligne 31.

Merci
18/01/2006, 15h42
Anduriel

Erf j'ai trouvé... J'ai déclaré mon div après le script dans il l'a pas trouvé. Mais l'inverse fonctionne :)
Merci
18/01/2006, 15h49
Anduriel

Ahh le problème c'est qu'il n'est pas compatible avec Mozilla :? Je ne connais absolument pas les fonctions qui diffèrent selon IE et Mozilla... Il m'envoit l'erreur comme quoi tooltip est encore pas défini ni tooltiptext.

Je vous mets le code IE entier:

Citation:

<html>
<head>
<title>JavaScript code/tooltip</title>
<style>
.class1{position : absolute;visibility : hidden;}
</style>
</head>
<body>
<div id="tooltip" class="class1"> </div>
<script language="JavaScript">
var nav = (document.layers);
var iex = (document.all);
var tooltiptext = (nav) ? document.tooltip : tooltip.style;
if (nav) document.captureEvents(Event.mousemove);
document.onmousemove = mousepos;
function msgpop(msg) {
var content ="<table width="+msg.Length+" border=0 cellpadding=1 cellspacing=0><tr><td><table width=100% border=0 cellpadding=1 cellspacing=0><tr><td><center>"+msg+"</center></td></tr></table></td></tr></table>";
if (nav) {
tooltiptext.document.write(content);
tooltiptext.document.close();
tooltiptext.visibility = "visible";
}
else if (iex) {
document.all("tooltip").innerHTML = content;
tooltiptext.visibility = "visible";
}
}
function mousepos(pos){
var x = (nav) ? pos.pageX : event.x+document.body.scrollLeft;
var y = (nav) ? pos.pageY : event.y+document.body.scrollTop;
tooltiptext.left = x-30;tooltiptext.top = y+20;
}
function killtip()
{tooltiptext.visibility = "hidden";}
</script>
<a name onmouseover="msgpop('test')" onmouseout="killtip()"; >test</a>
</body>
</html>

Si vous pouviez le dire ou ça coince.
merci
18/01/2006, 16h00
siddh

commence par faire un document.getElementById('tooltip') au lieu d'y accéder directement ;)
18/01/2006, 18h27
Anduriel

J'ai donc fait ça:

Code:

var tooltiptext = document.getElementById('tooltip').style;

Mais ça ne change rien (marche pour IE, pas pour Mozilla)
18/01/2006, 18h32
siddh

tu devrais peut etre mettre ca dans le window.onload histoire d'être sur que ton élément existe
18/01/2006, 18h34
javatwister

remarque, si tu écris:

Code:

var tooltiptext = document.getElementById('tooltip').style;

puis des trucs du genre:

Code:

tooltiptext.document.write(content);

tu t'exposes à des déconvenues :roll:
18/01/2006, 19h28
Anduriel

Ah oui en effet :roll:
Le problème c'est que même sans style, ça ne fonctionne pas (cette fois si sur IE ni sur Mozilla)
Sous IE j'ai aucune erreur (pas de panneau jaune)
Sous FF il me dit que events n'est pas défini.
19/01/2006, 15h48
viking16

Désolé d'y mettre mon grain de sel, mais pour les infos bulles rien de tel que OverLib ^^ Ca marche aussi bien sous IE que FF

Si tu n'arrives pas à la faire fonctionner dis le moi...
19/01/2006, 15h59
Anduriel

Merci mais tant de fichiers pour une bulle c'est un peu excessif :roll: Moi je souhaite vraiment le minimum...
19/01/2006, 16h17
viking16

Le seul fichier utile c'est overlib.js... il te suffit de faire un include.

ensuite tu dois juste mettre ceci apres le tag body :

Code:

<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>

et puis tu peux l'utiliser simplement sur n'importe quel tag comme ceci :

Code:

onmouseover="return overlib('hello world');" onmouseout="return nd();">

Il y a moyen d'y ajouter plein d'arguments comme par exemple la position de l'info bulle par rapport à l'élément, le nombre de pixel entre l'élément et l'info bulle... enfin à toi de voir.
19/01/2006, 16h21
Anduriel

Merci en fait j'ai essayé et c'est niquel mais une question pour les fichiers: es-tu sur que seul overlib.js suffit?
Et une autre: comment centrer le texte dans le div je n'ai pas trouvé...
Merci
19/01/2006, 16h23
artotal

tu peux utiliser la balise span dans un lien aussi, seulement pour faire suivre la bulle je ne sais pas faire si quelqu'un vois de quoi je parle, en faisant faire une partie au css et l'autre au .js, de plus on pourrai mettre une image facilement sous le texte !
J'ai appliqué sa pour cette page dans le menu, pas dans une info bulle mais dans un petit pannau que l'on met ou on veux

http://creatif-web.be/port_folio/
19/01/2006, 16h26
viking16

pour l'instant je suis au boulot et je n'ai pas d'exemple sous la main... J'ai utilisé ca pour un projet à la maison ^^ Je te reponds ce soir sans faute ^^

Voici un exemple concret d'utilisation d'overlib...
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"> </div> <map name="zone"> <area shape="rect" coords="30,197,138,245" href="enconstruction.html" onMouseOver= "return overlib('Modification d\'une fiche de réparation, d\'un client, d\'une facture,...' |-> texte de la bulle ,CAPTION,'Modification' |-> titre de la bulle ,CENTER |-> centrer par rapport à la souris ,OFFSETY,20 |-> decalage vertical (px) par rapport à la souris ,FGCOLOR,'#EAEFF0' |-> foreground color ,BGCOLOR,'#346099' |-> background color ,BORDER,1)" |-> border de la bulle onMouseOut="return nd()"/> |-> à utiliser pour effacer en partant </map>
Remarque, il est vrai que cela est génial, mais bon cela a ces limites :

- C'est un div

--> Faut jouer avec le z-index
--> Pbl si des listbox (elles passent au dessus du <div>) pbl connu ?
--> Si pas assez de place dans le fond de la page alors il va la prendre... Ca risque de faire de droles d'effets onMouseOut...
Enfin à part ça, l'essayer c'est l'adopter ! :D

21/01/2006, 19h37
Anduriel

Merci :)