Hintergrundbildgrösse ermitteln?

[Jesseblue]

Hallo,

Ich habe eine CCS-Id welche ich auf ein <div> anwende. Diese Id definiert beim <div> ein Hintergrundbild. Zusätzlich will ich, dass dieses <div> die Grösse des Bildes zugeschrieben bekommt. Bisher muss man dies aber doofer Weise selbst eingeben (siehe unten).
Gibt es eine Möglichkeit wie ich direkt die Grösse des Bildes herausbekomme?

Ich möchte auch nicht mehr als eine CSS-Definition verwenden, die sich um das ganze kümmert.

Also im Endeffekt soll man einfach ein Hintergrundbild über eine CSS definieren und das dazugehörige div übernimmt die Grösse vom Bild.

#left_top         { width:9px; height:24px; background-image:url(skin2/top_left.jpg); } 

PS: Warum ich kein <img> nehme? Weil es beim "gedrückthalten" so ne blöde Browserfunktion auslöst

[wahsaga]

Re: Hintergrundbildgrösse ermitteln?

Original geschrieben von Jesseblue
Ich möchte auch nicht mehr als eine CSS-Definition verwenden, die sich um das ganze kümmert.

Vergiss es.

PS: Warum ich kein <img> nehme? Weil es beim "gedrückthalten" so ne blöde Browserfunktion auslöst

Entwickle deinen HTML-Code so, dass du das jeweils passendste Element nimmst.

Transportiert dein Bild Inhalt, so ist es ein <img>.
Erfüllt es nur verzierende Funktion, so ist es ein Hintergrundbild.

Dabei "Rücksicht" auf irgendwelche zusätzlichen Funktionalitäten oder Effekte in irgendwelchen Browsern zu nehmen, wäre m.E. Unfug.

[Jesseblue]

Naja, ich baue momentan an einem Online-Desktop herum. Wie man das halt so kennt, und da gehören auch Fenster dazu. Ein Fenster kann man halt "skinnen" indem man eine CSS-Datei definiert.
Das alles wäre ja kein Problem und daher könnte ich auch <img>-Objekte verwenden. Da ein Fenster am Rahmen eine drag&move-Funktionalität haben soll, ist es absolut unpassend, dass dort die Browser-Funktion (Bildreferenz durch die Gegend ziehen) eintritt.

Dies konnte ich bequem dadurch verhindern, dass ich die Bilder als Hintergrund-Image benutzt hab, welches dafür aber sämtliche Grössenangaben verliert.
Kann ich denn irgendwie die "background-image:url(skin2/top_left.jpg);" Eigenschaft mit JavaScript auslesen, so dass ich dann ein temporäres <img>-Objekt erzeuge, dessen Werte ich verwende?

Über die Eigenschaft "backgroundImage" funktioniert dies scheinbar net. ( http://de.selfhtml.org/javascript/ob..._eigenschaften )

Es funktioniert halt alles wunderbar, alles wird automatisch berechnet, nur ist dies eine Sache die ich halt unschön finde.

[wahsaga]

Original geschrieben von Jesseblue
Über die Eigenschaft "backgroundImage" funktioniert dies scheinbar net.

Natürlich nicht.

Über das style-Objekt kannst du nur Werte auslesen, die entweder über das style-Attribut direkt am Element, oder zuvor per Javascript gesetzt wurden.

computedStyle wäre ja ein Stichwort.

[Jesseblue]

"computedStyle" hört sich ja vielversprechend an, leider finde ich unter google keine wirkliche Seite dazu. Hast du vieleicht eine akzeptable Quelle?
Danke.

[onemorenerd]

Schon versucht das IMG per z-index nach hinten und den Content nach vorn zu legen?

[Jesseblue]

Das mit dem z-index wird nicht funktionieren, da ich mit mehreren <div>-Elementen arbeite, damit man die Fenster auch resizen kann. Ein zentrales <div>-Element besitzt dann den eigentlichen Content.

[Jesseblue]

Falls jemand wissen will, wie man die Grösse eines Hintergrundbildes herausbekommen kann, hab dafür ne Lösung gefunden die akzeptabel ist:

var reg_imgFile = /\\w+\\/\\w+\\.\\S\\S\\S/; //  -> skin/middle_left.jpg
var dummy  = document.createElement("img");
var string = getComputedStyle(element,' ').getPropertyValue("background-image");
dummy.src  = string.match(reg_imgFile);
alert("x:"+dummy.width+"  y:"+dummy.height); 

So kriegt man die originalen Werte des Bildes heraus. Das <img> kann man dann verwerfen.

PS: man möge sich die Escape-Symbole im regulären Ausdruck dazudenken. Das Forum schmeisst diese wohl aus Sicherheitsgründen heraus.

[Jesseblue]

Muh... irgendwie klappt das Ganze doch noch net so ganz. Beim IE funktioniert es einwandfrei, beim Firefox gibt es ein Problem.

Ich muss bei Firefox die Seite einmal refreshen, erst dann erkennt er mit dem oben geposteten Code die Grösse des Bildes. Irgendwie merkwürdig.
Also, wenn ich Firefox starte und dann die Seite aufrufe gibt der alert "0" aus. Wenn ich dann refreshe bekomme ich die tatsächliche Grösse.

Hab mir gedacht, dass er die Grösse erst dann erkennt, wenn er das Objekt rendert. Aber Firefox scheint <img>-Objekte erst dann zu rendern, wenn der ganze Seitencontent fertig ist.

Hat jemand ne Idee wie ich an die Grösse des Bildes komme, mit dem vorherigen geposteten Code?

[Koala]

also:

entweder hast Du ein Hintergrundbild mit ner festen Größe
- z.B. 800 Pixel.
Dann bleiben es 800 Pixel, so oder so.

Oder Du hast ne Breite von z.B. 100%,
dann kommt es drauf an wie groß der Viewport
des Userclients ist (der Bereich den er tatsächlich sieht)
Diesen Viewport kannst aber nicht berechnen lassen.

[Jesseblue]

@Koala

Leuchtet schon ein was du da schreibst.
Was ich aber gern haben will ist, dass ich ein <img> Objekt mit JS erzeuge und dann dessen Grösse auslese, ohne das ich das Bild weiterverwende.

Das klappt bei IE wunderbar, leider bei Firefox nur mit Problemen.

[wahsaga]

Schon mal dran gedacht, dass der FF das Bild vielleicht auch erst mal fertig laden muss, bevor er die Größe ermitteln kann?
Und vielleicht ist er zu dem Zeitpunkt, wo das Script läuft, noch nicht damit feritg, auch im CSS eingebundene externe Bildressourcen komplett zu laden ...


Wenn du das img-Objekt erstellst, kannst du ihm auch dynamisch den Eventhandler oncomplete verpassen (ggf. onComplete schreiben, finde ich bei google in der Schreibweise spontan öfter) - und dann damit auf das Fertigladen des Bildes reagieren.

[Jesseblue]

Ich hab mal ne setTimeout() Funktion geschrieben, welche kontinuierlich den Ladezustand des Bildes abruft. Das Ergebnis war, dass das Bild nie fertig geladen ist. Dazu sei gesagt, ich teste das alles ja @mom Lokal!

Ich baue ein <img>-Objekt so wie ich es oben gepostet habe, füge es nur noch mit document.body.appendChild(image) ans Body aber es will nicht. Erst wenn ich die Seite refreshe funktioniert es. Hab herausgefunden das dann die Bilder wohl im Browsercache liegen, denn wenn ich diesen leere geht das Spielchen wieder von vorn los.

Beim IE funkt alles einwandfrei.