Hannes_W: Image-Objekt attribut "width" -> gibt falschen Wert aus

Hallo,

ich habe da ein Problem, auf das ich mir keinen Reim machen kann...

Auf meiner Seite soll ein Bild dargestellt werden, dass von Sprache zu Sprache unterschiedlich breit ist. Das Bild soll von einer bestimmten Stelle an rechtsbündig dargestellt werden.
Nun hab ich mir gedacht, dass ich die Breite des Bildes aus dem Image-Objekt auslesen kann, und dem entsprechend das Bild positionieren kann...
Allerdings gibt mir das Attribut "width" nicht den richtigen Wert aus...

Hier mein Beispielcode:

function load_page()
{
 .
 .Anderer Code
 ...

if(!linksLoaded)
 loadLinksImg(); // Detect lang before showing top links.

imgLinks[0].style.left = 1280 - imgLinks[0].width;

document.appendChild(imgLinks[0]); // Setup help buttons, top right

alert(imgLinks[0].width);  // GIBT MIR HIER EINE '24' AUS!

...
 .Weiterer Code
 .
}

function loadLinksImg()
{
 imgLinks[0] = new Image();
 imgLinks[0].src = "images/links/links_back_" + lang + ".png";
 imgLinks[0].style.position="absolute";
 imgLinks[0].style.left="0px"; imgLinks[0].style.top="0px";
 imgLinks[0].style.zIndex = 1;

...weitere Bilder werden hier definiert...

}

Ich hoffe das kommt halbwegs verständlich rüber :)

Weitere Besonderheiten:
Setze ich das 'alert' vor dem 'appendChild' Befehl, ist der Ausgabewert '0'.
Habe ich ein zusätzliches 'alert; in der Funktion 'loadLinksImg()', so ist der Ausgabewert korrekt... (natürlich will ich am Ende nirgendwo ein alert haben ;) )

Ich hoffe jemand weiss Rat, und kann mir erzählen was ich hier falsch mache..
Vielen Dank schon einmal!

  1. Hallo Hannes_W,

    das Bild ist vermutlich zu dem Zeitpunk, da du die Größe ermittelst, noch nicht geladen und die Maße sind noch nicht bekannt. Du kannst:

    • die Größe der Bilder fest in den Code einbauen,

    • das onload-Event nutzen,

    • das Bild mittels css positionieren. Das geht auch rechtsbündig. Siehe

    http://de.selfhtml.org/css/eigenschaften/positionierung.htm

    Gruß, Jürgen

    1. Danke! Habe leider Deinen Post nicht gesehen, als ich meinen schrieb :)

      Das mit dem positionieren mit CSS gestaltete sich etwas schwierig, daher hab ich diese Methode gewählt..

      Aber, nun klappt ja alles wie Erwartet :)
      Vielen Dank nochmal!

  2. Ok, hab die Ursache für den Fehler gefunden.

    Das Problem ist, dass die Information über "ImageObj.width" nicht während der Ausführung des Codes zur verfügung steht. Erst wenn der gesamte Code abgearbeitet ist, haben die attribute die gewünschten Werte.

    Habe also das Einlesen der Image-Objekte in eine Funktion gepackt, die vorher ausgeführt wird, und ich somit die width-information habe wenn ich sie brauche.

  3. Hi,

    imgLinks[0].style.left = 1280 - imgLinks[0].width;

    Du weist hier einen ungültigen Wert zu, left kann als Wert keine Zahl haben (eine Länge oder ein Prozentwert oder 'auto' oder 'inherit' sind gültige Werte)

    Abgesehen davon: das Bild soll doch an den rechten Rand. Warum versuchst Du es dann, am linken Rand auszurichten? right:0px; wäre sinnvoller - da brauchst Du die Breite des Bildes gar nicht wissen.

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    O o ostern ...
    Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.