Ermittlung der absoluten Position eines Bildes

[Latze Bierknecht]

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?

[plan_B]

Hallo,

Aufgerufen wird das erst am Ende des HTML-Codes.
...
Warum funktioniert das sicher erst nach dem Aktualisieren?

vielleicht startet das Script schon, bevor die einzelnen Elemente/Bilder geladen sind und so die Maße noch nicht feststehen.

schon mal einen Start durch onload auslösen lassen?

günstig wäre auch, sich nur einmal eine Referenz auf das Image zu holen.

function showImage(image, imageabsolut)
{
var topBild, leftBild, eltern;

var img1 = document.getElementById(image);
  topBild = img1.offsetTop;
  leftBild = img1.offsetLeft;
  ...
  }

Gruß plan_B

[Latze Bierknecht]

Das mit dem einmaligen Ermitteln der Referenz habe ich mal ausprobiert. Das funktioniert so wie es soll. Allerdings läßt sich der Fehler generell nur schwer reproduzieren. Er tritt nur auf, wenn die Seite dem Browser unbekannt ist. Kann sein, daß es das war, vielleicht aber auch nicht.

Das onload habe ich bei SELFHTML nachgesehen. Da fehlt mir die Angabe, wann die dahinter stehende Funktion denn ausgeführt wird. Wird die Seite erst komplett geladen oder komplett geladen und angezeigt, oder wird die Funktion schon vorher aufgerufen?

[Struppi]

Das onload habe ich bei SELFHTML nachgesehen. Da fehlt mir die Angabe, wann die dahinter stehende Funktion denn ausgeführt wird. Wird die Seite erst komplett geladen oder komplett geladen und angezeigt, oder wird die Funktion schon vorher aufgerufen?

onload heißt das die Funktion nach dem laden ausgeführt wird

Struppi.

[Latze Bierknecht]

onload heißt das die Funktion nach dem laden ausgeführt wird

Dann werde ich das mal ausprobieren.

Wenn man im IE den Verlauf löscht, müßte er doch jede Seite beim Aufrufen komplett neu laden, weil sie ihm unbekannt ist, oder?