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