Latze Bierknecht: Ermittlung der absoluten Position eines Bildes

Beitrag lesen

Salve,

ich habe ein paar Seiten geschrieben, die ein Hintergrundbild beinhalten. Im Seiteninhalt in der Mitte ist das Bild verblasst durch ein überlagertes Weiß. Lege ich ein Objektbild darauf, ist auch dieses transparent. Damit dies nicht passiert, helfe ich mit JavaScript nach.

Ich platziere ein Bild relativ zum Seiteninhalt, das sich seinen Platz selbst freimacht. Dieses Bild ist im Inhalt integriert, also transparent wie der gesamte Inhalt. Ich platziere ein zweites Bild unsichtbar absolut, nicht integriert im Inhalt, also nicht transparent. Per JavaScript wird die Position des ersten Bildes ermittelt, das erste Bild wird unsichtbar und das zweite Bild wird sichtbar und nicht transparent an die ermittelte Position gesetzt. Ist JavaScript ausgeschaltet, sieht man ein transparentes Bild, besser als gar keins.

Das alles funktioniert soweit ganz gut, mit einem unschönen Beigeschmack. Wenn eine Seite das erste Mal aufgerufen wird, ist das Bild schon mal deplatziert. Klickt man auf Aktualisieren, rückt es sich zurecht, dahin, wo es hingehört.

Anbei ein bisschen Code:
Dies ist die Funktion, die das Bild zurecht schiebt. Übergeben werden die IDs der beiden Bilder. Aufgerufen wird das erst am Ende des HTML-Codes.

function showImage(image, imageabsolut)
{
 var topBild, leftBild, eltern;
 topBild = document.getElementById(image).offsetTop;
 leftBild = document.getElementById(image).offsetLeft;
 eltern = document.getElementById(image).offsetParent;
 while(eltern)
 {
  topBild = topBild + eltern.offsetTop;
  leftBild = leftBild + eltern.offsetLeft;
  eltern = eltern.offsetParent;
 }
 document.getElementById(imageabsolut).style.top=topBild+"px";
 document.getElementById(imageabsolut).style.left=leftBild+"px";
 document.getElementById(imageabsolut).style.visibility="visible";
 document.getElementById(image).style.visibility="hidden";
}

Warum funktioniert das sicher erst nach dem Aktualisieren?