info-bulle dans une balise <table>

**Kazimir** · 23/03/2007, 00h09

bonjour,

débutant en javascript, j'ai un gros souci que je n'arrive pas a expliquer:
je souhaite faire apparaitre dans un formulaire, une bulle sous un champ text lors de sa modification.

pour cela, je recupere les valeurs left et top du champ modifié et j'en deduit la position de la bulle.
j'ai réussi a ecrire le script qui fonctionne lorsque le champ est seul sur la feuille mais lorsque je l'integre dans mon script final, je me retrouve avec ma bulle en haut a gauche de la feuille.

j'ai petit a petit eliminé les differents element pour isoler la balise <table> qui me met le cirque.
y' a t-il une technique speciale pour connaitre la position réelle de l'objet dans le tableau ??

voici pour exemple un extrait de mon code:

fichier tjsa.js:

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
29
30
31
32
33
34
35
36
37
38
39
40
 
function disp(txt) {document.write(txt);}
var IB=new Object;
var nsx=0;nsy=0;
 
 
function AffBulle(texte,id) {
 
leff = document.getElementById(id).offsetLeft;
topp = document.getElementById(id).offsetTop;
 
contenu="<TABLE border=1 cellspacing=0 cellpadding="+IB.NbPixel+" width=><TR bgcolor='#ffffff'><TD>"+texte+"</TD></TR></TABLE>";
 
	if (document.layers) {
		document.layers["bulle"].document.write(contenu);
		document.layers["bulle"].document.close();
		document.layers["bulle"].top=topp+25;
		document.layers["bulle"].left=leff;
		document.layers["bulle"].visibility="show";}
	if (document.all) {
		var f=window.event; e=f;
		doc=document.body.scrollTop;
		bulle.innerHTML=contenu;
		document.all["bulle"].style.top=topp+25;
		document.all["bulle"].style.left=leff;
		document.all["bulle"].style.visibility="visible";
 
	}
}
 
function InitBulle(ColTexte,ColFond,ColContour,NbPixel) {
	IB.ColTexte=ColTexte;IB.ColFond=ColFond;IB.ColContour=ColContour;IB.NbPixel=NbPixel;
	if (document.layers) {
		window.captureEvents(Event.MOUSEMOVE);window.onMouseMove=ns;
		document.write("<LAYER name='bulle' top=0 left=0 visibility='hide'></LAYER>");
	}
	if (document.all) {
		document.write("<DIV id='bulle' style='position:absolute;top:0;left:0;visibility:hidden'></DIV>");
	}
}

fichier devbulle.html: (code fonctionnant)

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
 
<html>
<head>
<SCRIPT language="javascript" src="tjsa.js"></SCRIPT>
<script type="text/javascript">
 
InitBulle("bleu","vert","vert",2);
function SearchNom(nom,id)
{
AffBulle(texte,id);
 
}
</script>
</head>
 
<body>
<form name="origine">
	<center><input type="text" size="15" id="nom" name="nom" onkeyup="SearchNom(this.value,this.name)"><input type="hidden" name="nom_a" id="nom_a" value=""><br>test de truc en plaque</center>
</form>
</body>
</html>

fichier devbulle.html: (code ne fonctionnant pas)

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
 
<html>
<head>
<SCRIPT language="javascript" src="tjsa.js"></SCRIPT>
<script type="text/javascript">
 
InitBulle("bleu","vert","vert",2);
function SearchNom(nom,id)
{
AffBulle(texte,id);
 
}
</script>
</head>
 
<body>
	<table><tr><td><center><input type="text" size="15" id="nom" name="nom" onkeyup="SearchNom(this.value,this.name)"><input type="hidden" name="nom_a" id="nom_a" value=""><br>test de truc en plaque</center></td></tr></table>
</body>
</html>

voila, si quelqu'un peu me donner de quoi avancer, ca m'aiderait beaucoup parce que je stagne.

merci d'avance.

**SpaceFrog** · 23/03/2007, 08h58

sinon sans utiliser la pierre philosophale ...

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'>
function infobulle(obj,couleur, texte){
labulle=document.getElementById('mabulle')
labulle.style.borderColor=couleur;
labulle.innerHTML=texte;
obj.parentNode.appendChild(labulle)
labulle.style.display='inline'
}
</script>
 
</head>
 
<body>
<div id="mabulle" style="position:absolute;border: solid 1px red;background-color:lightyellow;display:none;z-index:2;top:2em:left:0em;">&nbsp;</div>
<table>
	<tr>
		<td><input type='text' onfocus="infobulle(this,'blue','coucou')" /><br/></td>
	</tr>
	<tr>
		<td><input type='text' onfocus="infobulle(this,'green','salut')" /><br/></td>
	</tr>
	<tr>
		<td><input type='text' onfocus="infobulle(this,'black','ola')" /><br/></td>
	</tr>
 
</table>
 
</body>

info-bulle dans une balise <table>

JavaScript

Vue hybride

Discussions similaires

Partager

Partager