récupérer un élément

Version imprimable

Bonjour,
Il semble que j'ai un probleme pour afficher une infobulle avec une position relative à un élément
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 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> "; 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:

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

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:

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:

<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

07/07/2011, 09h56
Bovino

Code:

if (document.all)

:vomi:

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:

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

:no:

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

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

Code:

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:

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>

07/07/2011, 11h36
andry.aime

Bonjour,

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

A+.
07/07/2011, 11h56
thrakkazz

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

Bonjour,

Citation:

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:

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>