Tracer un trait à l'event 'load' par-dessus un contenu HTML.
Bonjour à tous, et merci à ceux qui voudront bien me lire.
Je vous expose la situation que je rencontre :
1) j'ai une page web avec un contenu HTML / JavaScript
2) je veux tracer un trait sur le tout, dans une fonction de l'évènement load
3) j'ai une fonction drawLine() qui permet de tracer un trait
Voici la façon dont je m'y suis pris jusqu'à présent :
Code:
1
2
3
4
5
6
7
8
| <body>
<div id="trait">
<!-- trait tracé dynamiquement par une fonction JavaScript -->
<div />
<div id="conteneurPrincipal">
<!-- éléments HTML contenu -->
</div>
</body> |
La balise d'id trait est placée en position absolute dans le CSS. L'idée générale, était de générer une page HTML par les voix traditionnelles, avec un div absolute (trait) sorti du flux et placé en position (0,0). Immédiatement après chargement, l'évènement 'load' devait déclencher un appel à la fonction drawLine(paramètres), et le trait être tracé par-dessus les autres éléments de la page, par : document.getElementById("trait").innerHTML= leTrait; où leTrait contient un ensemble de div qui forment un trait.
Que se passe-t-il sur ma page? Le trait est bien tracé et au bon endroit, mais il vient écraser l'ensemble des éléments de la page, il se trace donc à la place des éléments HTML de la page, qui ne sont même pas décalés vers le bas mais qui tout simplement disparaissent.
Lorsque je fais le test de supprimer le innerHTML de la fonction drawLine, bien sûr la charge est chargée normalement (sans le trait), et lorsqu'en plus, je place du texte dans le div d'id trait, le texte s'affiche sur la page en décalant les éléments HTML vers le bas, ce qui me laisse penser que le div trait n'est pas considéré comme absolute, pourtant pour m'en assurer, j'ai directement mis l'attribut :
Code:
1
2
3
| <div id="trait" style="position: absolute">
<div /> |
Quelqu'un a-t-il une idée qui pourrait m'aider à résoudre mon problème? Quelqu'un a-t-il déjà rencontré ce cas de figure?
D'avance merci, et si vous avez besoin de précisions, n'hésitez pas à les demander.
PS : la fonction drawLine() est une fonction répandue, j'utilise cette version :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| function drawLine(x1,y1,x2,y2,color,espacementPointille,divId)
{
if(espacementPointille<1) { espacementPointille=1; }
var lg=Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
var nbPointCentraux=Math.ceil(lg/espacementPointille)-1;
var stepX=(x2-x1)/(nbPointCentraux+0);
var stepY=(y2-y1)/(nbPointCentraux+0);
var strNewPoints='';
for(var i=1 ; i<nbPointCentraux ; i++)
{
strNewPoints+='<div style="font-size:1px; width:1px; heigth:1px; background-color:'+color+'; position:absolute; top:'+Math.round(y1+i*stepY)+'px; left:'+Math.round(x1+i*stepX)+'px; "> </div>';
}
var myContainer=document.getElementById(divId);
myContainer.innerHTML = strNewPoints;
} |
mais comme le trait se trace bien, je pense que le problème est situé en amont
Voici également la fonction évènement 'load' :
Code:
1
2
3
4
5
6
7
8
9
|
var barreLogo = document.getElementById("barreLogo");
var partSignature = document.getElementById("partSignature");
window.addEventListener('load', function() {
drawLine(barreLogo.offsetWidth,partSignature.offsetTop,barreLogo.offsetWidth+100,partSignature.offsetTop-100,"red",1,"trait");
}, true); |
où barreLogo et partSignature font parti du contenu (écrasé par le innerHTML) de la page web,
