r�cup�rer un �l�ment

**thrakkazz** · 07/07/2011, 09h51

Bonjour,
Il semble que j'ai un probleme pour afficher une infobulle avec une position relative � un �l�ment

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<HEAD>
  <TITLE>Feuille de résultats</TITLE>
  <SCRIPT LANGUAGE="JavaScript" type="text/javascript">
    var IB=new Object;
    var posY=0;
    var yOffset=-5;
    function AffBulle(eleID, texte, xOffset) {
      contenu="<TABLE border=0 cellspacing=0 cellpadding="+IB.NbPixel+"><TR bgcolor='"+IB.ColContour+"'><TD><TABLE border=0 cellpadding=2 cellspacing=0 bgcolor='"+IB.ColFond+"'><TR><TD><FONT size='-1' color='"+IB.ColTexte+"'>"+texte+"</FONT></TD></TR></TABLE></TD></TR></TABLE>&nbsp;";
      if (document.all) {
        bulle.innerHTML=contenu;
        var ele=document.all["+eleID+"];
        yOffset=calculeOffsetTop(ele);
        document.all["bulle"].style.top=yOffset;
        document.all["bulle"].style.left=xOffset;
        document.all["bulle"].style.visibility="visible";
      }
    }
 
    function getMousePos(e) {
      if (document.all) {
        posY=event.y+document.body.scrollTop;
      }
      else {
        posY=e.pageY;
      }
    }
 
    function HideBulle() {
      if (document.all) {
        document.all["bulle"].style.visibility="hidden";
      }
     }
 
    function InitBulle(ColTexte,ColFond,ColContour,NbPixel) {
      IB.ColTexte=ColTexte;IB.ColFond=ColFond;IB.ColContour=ColContour;IB.NbPixel=NbPixel;
      if (document.all) {
        document.write("<DIV id='bulle' style='position:absolute;top:0;left:0;visibility:hidden'></DIV>");
        document.onmousemove=getMousePos;
      }
    }
 
    function calculeOffsetTop(r){
      return calculeOffset(r,"offsetTop")
    }
    function calculeOffset(element,attr){
      var offset=0;
      while(element){
        offset+=element[attr];
        element=element.offsetParent;
      }
      return offset;
    }
  </SCRIPT>
</HEAD>
<BODY>
  <SCRIPT language="JavaScript">
    InitBulle("black","#FFCC66","orange",1);
  </SCRIPT>

et plus loin dans une table... une cellule:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

<td width=30% id='H3480'><font size=-1><A style="color: black; text-decoration: none" href="#" onMouseOver="AffBulle('H3480', 'mon super text', 180)" onMouseOut="HideBulle()">See this ?</A></font></td>

Ce que je cherche � faire c'est � afficher mon info bulle � quelques pixels � droite de mon �l�ment et � "la m�me hauteur" que lui.
Pour la droite aucun soucis puisque je passe le nombre de pixel, ici 180.
le soucis est avec la hauteur d'affichage car je veux que l'info bulle soit allign� avec mon text "See this ?"
Avec la position de la sourie �a marche moyen car suivant que j'accede au lien par le dessus ou par le dessus l'info bulle se d�calle soit vers le haut soit vers le bas.
Bref mon id�e c'est de r�cup�per l'offset de ma cellule et ensuite � partir de l� de calculer la position Y de mon info bulle pour l'aligner avec ma cellule (qui elle m�me contient le lien).
J'ai l'impression que c'est cette partie du code qui ne marche pas donc:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
        var ele=document.all["+eleID+"];
        yOffset=calculeOffsetTop(ele);

Pour info c'est une simple page html sans <FORM> ni <DIV> mais c'est peut etre l� aussi le soucis...
Comment je peux r�cup�rer mon �l�ment ?
J'ai l'impressin qu'il me faudrait peut etre utiliser des <DIV> </DIV> mais je ne sais pas o�.
J'ai essay� de remplacer �a

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
<td width=30% id='H3480'><font size=-1><A style="color: black; text-decoration: none" href="#" onMouseOver="AffBulle('H3480', 'mon super text', 180)" onMouseOut="HideBulle()">See this ?</A></font></td>
par ça mais sans succes

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

<div id='H3480'><td width=30%><font size=-1><A style="color: black; text-decoration: none" href="#" onMouseOver="AffBulle('H3480', 'mon super text', 180)" onMouseOut="HideBulle()">See this ?</A></font></td></div>

Merci de votre aide

**Bovino** · 07/07/2011, 09h56

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

if (document.all)

document.all est une syntaxe obsol�te depuis des d�cennies... c'est sp�cifique IE (et Opera) et ne doit plus �tre utilis� depuis IE4 et l'apparition de getElementById !

EDIT :
J'avais pas vu le pire :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

var ele=document.all["+eleID+"];

Tu crois vraiment que tu as un �l�ment dont le nom est +eleID+ ?

**thrakkazz** · 07/07/2011, 10h22

ok mais m�me en nettoyant mon code des document.all
et en corrigeant

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
var ele=document.getElementById(eleID);
yOffset=calculeOffsetTop(ele);

ca ne marche pas mieux (carrement plus d'info bulle visible alors que si je supprime ces 2 lignes �a marche bien mais c'est dependant de la position sourie

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
41
42
43
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
    var IB=new Object;
    var posY=0;
    var yOffset=-5;
    function AffBulle(eleID, texte, xOffset) {
      contenu="<TABLE border=0 cellspacing=0 cellpadding="+IB.NbPixel+"><TR bgcolor='"+IB.ColContour+"'><TD><TABLE border=0 cellpadding=2 cellspacing=0 bgcolor='"+IB.ColFond+"'><TR><TD><FONT size='-1' color='"+IB.ColTexte+"'>"+texte+"</FONT></TD></TR></TABLE></TD></TR></TABLE>&nbsp;";
        document.getElementById("bulle").innerHTML=contenu;
        document.getElementById("bulle").style.top=posY+yOffset;
        document.getElementById("bulle").style.left=xOffset;
        document.getElementById("bulle").style.visibility="visible";
    }
 
    function getMousePos(e) {
      if (document.all) {
        posY=event.y+document.body.scrollTop;
      }
      else {
        posY=e.pageY;
      }
    }
 
    function HideBulle() {
      document.getElementById("bulle").style.visibility="hidden";
    }
 
    function InitBulle(ColTexte,ColFond,ColContour,NbPixel) {
      IB.ColTexte=ColTexte;IB.ColFond=ColFond;IB.ColContour=ColContour;IB.NbPixel=NbPixel;
      document.onmousemove=getMousePos;
      document.write("<DIV id='bulle' style='position:absolute;top:0;left:0;visibility:hidden'></DIV>");
    }
 
    function calculeOffsetTop(r){
      return calculeOffset(r,"offsetTop")
    }
    function calculeOffset(element,attr){
      var offset=0;
      while(element){
        offset+=element[attr];
        element=element.offsetParent;
      }
      return offset;
    }
  </SCRIPT>

**andry.aime** · 07/07/2011, 11h36

Bonjour,

L'�l�ment � l'attribut id pass� en param�tre ?
Montre nous le code HTML.

A+.

**thrakkazz** · 07/07/2011, 11h56

Bon alors apr�s un gros coup de bol j'ai trouv� �a:
http://www.quirksmode.org/dom/w3c_cs...l#offsetParent

et donc sous IE7 le offsetTop ne marche pas apparement alors que le offsetLeft marche.

Dommage c'est justement le offsetTop que je voullais.
Bon et bien ce n'est pas grave, l'info bulle ne sera que pour ceux qui utilisent les derniers IE et puis voil� ^^

Merci pour votre aide

**NoSmoking** · 07/07/2011, 13h10

Bonjour,

Envoy� par thrakkazz

Ce que je cherche � faire c'est � afficher mon info bulle � quelques pixels � droite de mon �l�ment et � "la m�me hauteur" que lui.

cela se fait en CSS de nos jours...

Code html :

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
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS Info Bulle</title>
<style type="text/css">
html, body {
  font-family : Verdana;
  font-size : 1.0em;
}
span.bulle {
  border-bottom : 1px dotted #f08080;  
  cursor : pointer;  
}
span.bulle span{
  display:none;
}
span.bulle:hover span{
  position : absolute;
  display : inline;
  padding : 5px;  
  padding-right : 5px;    
  background-color : #fefeee;  
  border : 1px solid #f0f080;  
}
</style>
<body>
<p>
Ce paragraphe contient une <span class="bulle">info Bulle<span>Texte de l'info Bulle</span></span> et le texte du texte sans importance...
</p>
</body>
</html>

r�cup�rer un �l�ment

JavaScript

Discussions similaires

Partager

Partager