Auslesen von Bildern ohne gesetzten Wert
Papellucho
- javascript
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.
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
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 :)
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.
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.
@@Papellucho:
nuqneH
Nun möchte ich die Höhe 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'
@@Papellucho:
nuqneH
Nun möchte ich die Höhe 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 :)
Hallo Papellucho,
bei Bildern feuert das onload-Event, darüber lese ich die Größe von Bildern aus.
Gruß, Jürgen
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
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
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
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
@@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'