Papellucho: Auslesen von Bildern ohne gesetzten Wert

Guten Morgen,

ich habe mal wieder ein kleines Problem:
Es geht darum, dass ich verschiedene Bilder habe welches Breitenangaben haben, aber keine feste höhe.

Die Bilder sollen sich je nach Größe des Bildschirms anpassen.

Nun möchte ich die Höhe auslesen, um einen Balken exakt darunter zu positionieren, aber wenn ich versuche es auszulesen, erhalte ich entweder "undefined" oder "null"

Probiert hab ich es schon mit Javascript und auch JQuery..
Ich hab natürlich auch auf das fertigladen des Dokuments abgewartet

also bis jetzt:

  
document.getElementById('id').style.height  
document.getElementById('id').height  
$('#id').height()  
$('#id').css("height")  

kennt einer von euch eine Möglichkeit, um mein Problem zu lösen?

Bin für jede Hilfe Dankbar.

  1. Om nah hoo pez nyeetz, Papellucho!

    Es geht darum, dass ich verschiedene Bilder habe welches Breitenangaben haben, aber keine feste höhe.
    Die Bilder sollen sich je nach Größe des Bildschirms anpassen.
    Nun möchte ich die Höhe auslesen, um einen Balken exakt darunter zu positionieren, aber wenn ich versuche es auszulesen, erhalte ich entweder "undefined" oder "null"

    Ich werde aus deiner Beschreibung nicht schlau.

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Deck und Deckhengst.

    1. Om nah hoo pez nyeetz, Papellucho!

      Es geht darum, dass ich verschiedene Bilder habe welches Breitenangaben haben, aber keine feste höhe.
      Die Bilder sollen sich je nach Größe des Bildschirms anpassen.
      Nun möchte ich die Höhe auslesen, um einen Balken exakt darunter zu positionieren, aber wenn ich versuche es auszulesen, erhalte ich entweder "undefined" oder "null"

      Ich werde aus deiner Beschreibung nicht schlau.

      Matthias

      okay Kurzfassung in Singular :D :

      Ich habe ein Bild welches Absolut auf der Webseite positioniert ist.
      Ich möchte unter das Bild einen Text hängen.
      Den Abstand nach oben und Links kann ich ohne Probleme auslesen.
      Problem:
      Die Höhe des Bildes kann ich nicht auslesen -> ich bekomme nur entweder "null" oder "undefined" zurück.

      Hoffe das ist Verständlicher :)

  2. Tach!

    Nun möchte ich die Höhe auslesen, um einen Balken exakt darunter zu positionieren

    Wenn der zum Beispiel einfarbig sein soll, kann das auch Hintergrundfarbe vom Container sein, in dem das Bild liegt.

    dedlfix.

    1. Tach!

      Nun möchte ich die Höhe auslesen, um einen Balken exakt darunter zu positionieren

      Wenn der zum Beispiel einfarbig sein soll, kann das auch Hintergrundfarbe vom Container sein, in dem das Bild liegt.

      dedlfix.

      Ja, das wäre die 2.e Möglichkeit..

      Im Moment ist es nur ein Bild mit einem Text ohne Container oder Hintergrund.
      Ich wollte Hier nachfragen, ob es vielleicht eine Lösung gibt, ohne die Hälfte des Quelltextes umzuschreiben.

  3. @@Papellucho:

    nuqneH

    Nun möchte ich die Höhe auslesen,

    CSS-Eigenschaften auslesen

    um einen Balken exakt darunter zu positionieren

    Ich glaube nicht, dass du dafür JavaScript brauchst. Das sollte mit CSS gehen. Beschreib mal genauer, was du vorhast.

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. @@Papellucho:

      nuqneH

      Nun möchte ich die Höhe auslesen,

      CSS-Eigenschaften auslesen

      um einen Balken exakt darunter zu positionieren

      Ich glaube nicht, dass du dafür JavaScript brauchst. Das sollte mit CSS gehen. Beschreib mal genauer, was du vorhast.

      Qapla'

      Hmm Ich hab das mal mit den getComputedStyle umgeschrieben, aber jetzt gibt der mir den Wert 0 aus, was immer noch besser als die undefined ist.

      Mir ist grade aufgefallen, dass wenn ich das Fenster minimal in der Größe änder, ist alles da wo es hingehört.. Hat jemand dafür eine Idee? ^^

      Also meine Idee ist:
      Ich habe ein Bild welches Absolut auf der Webseite positioniert ist.
      Ich möchte unter das Bild einen Text hängen.
      Den Abstand nach oben und Links kann ich ohne Probleme auslesen.
      Problem:
      Die Höhe des Bildes kann ich nicht auslesen -> ich bekomme nur entweder "null" oder "undefined" zurück. (Oder mit getComputedStyle -> 0)

      Hoffe das ist Verständlicher :)

      1. Hoffe das ist Verständlicher :)

        Wie wärs, wenn du deinen Code bei jsfiddle einsetzt, dann können es alle sehen und ggf. mit Firebug analysieren. Code aus Postings herauskopieren hat noch selten jemanden glücklich gemacht!

      2. Hallo Papellucho,

        bei Bildern feuert das onload-Event, darüber lese ich die Größe von Bildern aus.

        Gruß, Jürgen

        1. Hallo Papellucho,

          bei Bildern feuert das onload-Event, darüber lese ich die Größe von Bildern aus.

          Gruß, Jürgen

          Hallo Jürgen,

          was genau meinst du damit?

          Selbst wenn ich mit $(document).ready warte bis alles geladen ist, kriege ich ungültige Werte..

          Gruß Papellucho

          1. Om nah hoo pez nyeetz, Papellucho!

            Stelle uns bitte ein online-Beispiel zur Verfügung, wie es der Vertreter vom Linksetzer empfohlen hat und bitte zitiere sinnvoll, nur das, worauf du dich gerade konkret beziehst.

            Vollzitate sind weder notwendig noch erwünscht - im Gegenteil, sie stören nur den Lesefluss.

            Matthias

            --
            Der Unterschied zwischen Java und JavaScript ist größer als der zwischen wir und Wirrwarr.

          2. bei Bildern feuert das onload-Event, darüber lese ich die Größe von Bildern aus.
            was genau meinst du damit?

            Selbst wenn ich mit $(document).ready warte bis alles geladen ist, kriege ich ungültige Werte..

            $(document).ready(…) (intern DOMContentLoaded-Event) wartet NICHT auf das Laden des Bildes, sondern nur auf das Einlesen des HTML-Codes.

            Wenn das Bild vollständig geladen ist, feuert ein load-Event beim Bild, wie Jürgen schrieb. Der dokumentweite load-Event feuert, wenn alle Bilder geladen sind – in jQuery $(window).load(function() {…}).

            <img src="" id="bild">

            $('#bild').load(function() {});
            oder dokumentweit
            $(window).load(function() {});

            Dann klappt auch das Auslesen der http://de.selfhtml.org/javascript/objekte/images.htm#height@title=Höhe.

            Mathias

          3. Hallo Papellucho,

            ich kenne mich mit jQuery nicht aus und weiß daher nicht, wann der document-ready feuert, ich vermute aber vor dem Laden der Bilder.

            Das Onload-Event bei Bildern kann z.B. über <img src=... onload=...> gesetzt werden, über

            document.getElementById("ID_des_Bildes").onload = ....

            oder mit den jQuery-Methoden.

            Gruß, Jürgen

      3. @@Papellucho:

        nuqneH

        Hoffe das ist Verständlicher :)

        Nein, das ist es nicht. Wenn ich sage: lass mal sehen, wie man das ohne JavaScript hinbekommt, dann ist es kaum hilfreich, wenn du deine Versuche mit JavaScript beschreibst.

        Wie sieht dein Markup aus? Bild mit Unterschrift sollte so aussehen:

        <figure>  
          <img src="" alt=""/>  
          <figcaption>Bildunterschrift</figcaption>  
        </figure>
        

        Hast du das so?

        Wie sieht dein CSS aus? Warum ist das Bild absolut positioniert? Link zur Beispielseite?

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)