Pb initialisation javascript

Fermé
vinbra Messages postés 1 Date d'inscription lundi 4 mai 2015 Statut Membre Dernière intervention 4 mai 2015 - 4 mai 2015 à 22:25
Bonjour,
Je mets en place un slideshow dont la liste d'images est générée dynamiquement par du code PHP. Autour d'une image, j'affiche le titre (en dessous) et des boutons à gauche et à droite pour changer d'image. La taille des images étant variable, je positionne le titre et les boutons en fonction de la largeur et la hauteur de l'image courante. Tout ceci marche bien, sauf à l'initialisation, où apparemment les valeurs de hauteur et largeur d'image ne sont pas correctes, ce qui cause un mauvais positionnement du titre et des boutons (c'est bon dès qu'on change d'image).
Pourtant, j'appelle ma fonction InitPage sur l'événement onload, tout devrait donc être initialisé.
J'ai essayé plein de choses mais rien n'y fait. Pouvez-vous m'aider, svp ?
Je vous mets le code (simplifié car j'ai remplacé le PHP par une initialisation statique).
C'est dans la fonction Maj que les valeurs offsetWidth et offsetHeight ne sont pas bonnes.


<HTML>
<HEAD>
<style>
#slideShow {
position: absolute;
top:60;
left:250;
}
#photoContainer img {
position: absolute;
opacity: 0;
}

#leftButton {
position: absolute;
}
#rightButton {
position: absolute;
}
#photoTitle {
position: absolute;
}
</style>

</HEAD>
<script>
var Filename= new Array;
var Titre= new Array;

Filename[0]= "photos/CartePostale_8.jpg"; Titre[0]= "Gozo";
Filename[1]= "photos/CartePostale_21.jpg"; Titre[1]= "Cartes spéciales";
Filename[2]= "photos/CartePostale_27.jpg"; Titre[2]= "Du haut du Kang Yatse<BR>Alpinisme et Grands espaces";

idx=0;


function Maj(idx)
{
var index, elem;
var dummy, offset;

document.getElementById("photoTitle").innerHTML=Titre[idx];

/* positionnement dynamique des elements autour de l'image */

index = 'i'+idx;

/* bouton droit */
offset = document.getElementById('slideShow').offsetLeft + document.getElementById(index).offsetWidth + 20;
document.getElementById('rightButton').style.left=offset+'px';
offset = document.getElementById('slideShow').offsetTop + document.getElementById(index).offsetHeight / 2;
document.getElementById('rightButton').style.top=offset+'px';

/* bouton gauche */
offset = document.getElementById('slideShow').offsetLeft - 55;
document.getElementById('leftButton').style.left=offset+'px';
offset = document.getElementById('slideShow').offsetTop + document.getElementById(index).offsetHeight / 2;
document.getElementById('leftButton').style.top=offset+'px';

/* titre */
offset = document.getElementById('slideShow').offsetLeft + document.getElementById(index).offsetWidth/2 - document.getElementById('photoTitle').offsetWidth/2;
document.getElementById('photoTitle').style.left=offset+'px';
offset = document.getElementById('slideShow').offsetTop + document.getElementById(index).offsetHeight + 20;
document.getElementById('photoTitle').style.top=offset+'px';

/* affichage des boutons */

if (idx == 0)
butleft.style.visibility="hidden";
else
butleft.style.visibility="visible";

if (idx == Filename.length-1)
butright.style.visibility="hidden";
else
butright.style.visibility="visible";
}


function Next(inc)
{
var index, i;
var elem;

for (i = 0; i < Filename.length; i++)
{
if (i == idx)
{
index = "i" + String(i);
elem = document.getElementById(index);
elem.style.opacity="0";

if (inc == 1)
index = "i" + String(i+1);
else if (inc == -1)
index = "i" + String(i-1);

elem = document.getElementById(index);
elem.style.opacity="1";
}
}

idx += inc;
Maj (idx);

}


function InitPage()
{
var index, i;
var elem;
var txt;

txt = "";
for (i = 0; i < Filename.length; i++) {
txt += "<img id='i"+String(i)+"' />";
}
document.getElementById("photoContainer").innerHTML = txt;

for (i = 0; i < Filename.length; i++)
{
index = "i" + String(i);
elem = document.getElementById(index);

elem.src = Filename[i];
if (i == idx)
{
elem.style.opacity="1";
}
else
elem.style.opacity="0";
}

Maj(idx);
}
</script>
<BODY TOPMARGIN="0" LEFTMARGIN="0" SCROLL="yes" oncontextmenu="return false" onload='InitPage();'>

<div id="slideShow" style="position:absolute; ">
<div align="center" border="0">
<div id="photoContainer" ></div>
</div>
</div>

<div id="photoTitle" >
<SPAN id="title"></SPAN>
</div>

<div id="leftButton" >
<img id="butleft" name="butleft" src="img/butleft.gif" onClick='javascript:Next(-1);'>
</div>

<div id="rightButton" >
<img id="butright" name="butright" src="img/butright.gif" onClick='javascript:Next(1);'>
</div>

</BODY>