InfoBulle

**Anduriel** · 17/01/2006, 21h20

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 :

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

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

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]

**siddh** · 17/01/2006, 22h07

a quelle ligne l'erreur ?

**Anduriel** · 18/01/2006, 15h36

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

**Anduriel** · 18/01/2006, 15h42

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

**Anduriel** · 18/01/2006, 15h49

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:

<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

**siddh** · 18/01/2006, 16h00

commence par faire un document.getElementById('tooltip') au lieu d'y accéder directement

**Anduriel** · 18/01/2006, 18h27

J'ai donc fait ça:

Code :

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

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

Mais ça ne change rien (marche pour IE, pas pour Mozilla)

**siddh** · 18/01/2006, 18h32

tu devrais peut etre mettre ca dans le window.onload histoire d'être sur que ton élément existe

**javatwister** · 18/01/2006, 18h34

remarque, si tu écris:

Code :

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

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

puis des trucs du genre:

Code :

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

tooltiptext.document.write(content);

tu t'exposes à des déconvenues

**Anduriel** · 18/01/2006, 19h28

Ah oui en effet

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.

**viking16** · 19/01/2006, 15h48

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

**Anduriel** · 19/01/2006, 15h59

Merci mais tant de fichiers pour une bulle c'est un peu excessif

Moi je souhaite vraiment le minimum...

**viking16** · 19/01/2006, 16h17

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 :

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

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

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

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.

**Anduriel** · 19/01/2006, 16h21

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

**artotal** · 19/01/2006, 16h23

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/

**viking16** · 19/01/2006, 16h26

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

**viking16** · 19/01/2006, 20h47

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

Code :

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

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 !

**Anduriel** · 21/01/2006, 19h37

Merci

InfoBulle

JavaScript

Vue hybride

Discussions similaires

Partager

Partager