 |
Publicité 
|
Pour manipuler les caractéristiques (contenu, visibilité, …) d'un DIV, il est souvent nécessaire de le définir en position absolue (style = "position :absolute"). Ceci implique de connaître précisément les coordonnées absolues du DIV. Or, si la page change, il faut recalculer ces coordonnées.
Afin de s'affranchir de ce problème, il existe une technique qui consiste à affecter les coordonnées du DIV avec celle d'une ancre qui est placée au bon endroit. Ainsi, on ne résonne plus en coordonnées absolues.
Nous allons décrire les étapes à réaliser pour positionner un DIV à l'endroit défini par une ancre lors du chargement de la page HTML..
Dans un premier temps, déclarez entre les balises <HEAD> et </HEAD> le javascript suivant:
<SCRIPT>
<!--
| var ns4 = (document.layers)? true:false; | //NS 4 |
| var ie4 = (document.all)? true:false; | //IE 4 |
| var dom = (document.getElementById)? true:false; | //DOM |
function setToAnchor(ID_Anchor,Name_Anchor,ID_Div)
//Fonction permettant de positionner un DIV à une position occupée par une ancre
{
| var DivLeft = 0; | //Position du Div par rapport au côté gauche de la page |
| var DivTop = 0; | //Position du Div par rapport au haut de la page |
if (dom)
{
pos = document.getElementById(ID_Anchor);
DivLeft = getLeft(pos);
DivTop = getTop(pos);
document.getElementById(ID_Div).style.left = DivLeft;
document.getElementById(ID_Div).style.top = DivTop;
}
else if (ie4)
{
pos = document.all[ID_Anchor];
DivLeft = getLeft(pos);
DivTop = getTop(pos);
document.all[ID_Div].style.posLeft = DivLeft;
document.all[ID_Div].style.posTop = DivTop;
}
else if (ns4)
{
pos = document.anchors[Name_Anchor];
DivLeft = pos.x;
DivTop = pos.y;
document.layers[ID_Div].pageX = DivLeft;
document.layers[ID_Div].pageY = DivTop;
}
}
function getLeft(MyObject)
//Fonction permettant de connaître la position d'un objet
//par rapport au bord gauche de la page.
//Cet objet peut être à l'intérieur d'un autre objet.
{
if (MyObject.offsetParent)
return (MyObject.offsetLeft + getLeft(MyObject.offsetParent));
else
return (MyObject.offsetLeft);
}
function getTop(MyObject)
//Fonction permettant de connaître la position d'un objet
//par rapport au bord haut de la page.
//Cet objet peut être à l'intérieur d'un autre objet.
{
if (MyObject.offsetParent)
return (MyObject.offsetTop + getTop(MyObject.offsetParent));
else
return (MyObject.offsetTop);
}
//-->
</SCRIPT>
Ensuite, déclarez le tag body suivant :
<BODY OnLoad="setToAnchor('id_ancre','nom_ancre','MonDiv')">
Après, déclarez où vous voulez dans votre page HTML le DIV que vous voulez placer :
<DIV id="MonDiv" style="position:absolute;visibility:visible;">
Le Contenu de mon div...
</DIV>
Et enfin, à l'endroit où vous voulez placer votre DIV, déclarez l'ancre :
<A id="id_ancre" name="nom_ancre"> </A>
Remarque : Pour que cela fonctionne sur tous les navigateurs, il faut que l'ancre contienne quelque chose. C'est pourquoi, on a mis dans l'ancre.
|
