Moin.

In einer Tabelle werden beim mouseover Hintergrund-Farbverläufe
eingeblendet. Weil sich die Höhe der Zeilen ändern kann, werden die
Bilder in Abhängigkeit von der Höhe dynamisch erzeugt. Etwa so:

height =3D tr.offsetHeight;
tr.style.background =3D "url(bg.php?farbe=3Dblau&hoehe=3D" + height + ")
repeat-x";

Das klappt mit FF2/IE6/IE7. Aber IE scheint die Bilder nicht zu
cachen - trotz gleicher Höhe und Farbe. Es gibt eine Verzögerung beim
mouseover und im Tab-Register taucht auf immer kurz dieser "Nachlade-
Kringel" auf. Ich habe in dem Script 'bg.php' auch schon einen
Filenamen vergeben; hat aber nichts gebracht:

header("Content-type: image/png");
header("Content-Disposition: filename=3Dbg.$farbe.$height.png");

Irgendwelche Ideen?

Vielen Dank im Voraus.

Peter

Post removed (X-No-Archive: yes)

Peter Schleif wrote:
> Moin.
>
> In einer Tabelle werden beim mouseover Hintergrund-Farbverl=C3=A4ufe
> eingeblendet. Weil sich die H=C3=B6he der Zeilen =C3=A4ndern kann, wer=
den die
> Bilder in Abh=C3=A4ngigkeit von der H=C3=B6he dynamisch erzeugt. Etwa =
so:
>
> height =3D tr.offsetHeight;
> tr.style.background =3D "url(bg.php?farbe=3Dblau&hoehe=3D" + height + =
")
> repeat-x";
>
> Das klappt mit FF2/IE6/IE7. Aber IE scheint die Bilder nicht zu
> cachen - trotz gleicher H=C3=B6he und Farbe. Es gibt eine Verz=C3=B6g=
erung beim
> mouseover und im Tab-Register taucht auf immer kurz dieser "Nachlade-
> Kringel" auf. Ich habe in dem Script 'bg.php' auch schon einen
> Filenamen vergeben; hat aber nichts gebracht:
>
> header("Content-type: image/png");
> header("Content-Disposition: filename=3Dbg.$farbe.$height.png");
>
> Irgendwelche Ideen?
>
> Vielen Dank im Voraus.
>
> Peter

Erzeuge *eine* Grafik, in der die verschiedenen H=C3=B6hen unter- bzw.
nebeneinander angelegt sind =E2=80=93 je nach Ausrichtung des Verlaufs. D=
ie
Anzahl an m=C3=B6glichen Hintergrundh=C3=B6hen wird ja wohl endlich sein.=
Diese
eine Grafik positionierst du dann je nach (erwarteter) H=C3=B6he der
Tabellenzelle per CSS.

Bei dieser Vorgehensweise muss die Grafik nur einmal geladen werden und
das Nachladen beim Hovern entf=C3=A4llt unabh=C3=A4ngig von Cache-Einstel=
lungen.
Das verstehen selbst die alten IEs.

Mehr dazu findest du unter dem Suchbegriff "css-sprites" oder hier[1].

Weil das hier allerdings ziemlich OT ist, gibt es mal einen x-post und
followup-to d.c.i.w.a.m. Deshalb auch das Fullquote.

Gr=C3=BC=C3=9Fe

Der Stefan

[1] http://www.webkrauts.de/2007/10/20/hovereffekte-mit-css-spri tes/

--
"And all those exclamation marks, you notice? Five? A sure sign of
someone who wears his underpants on his head."
(Terry Pratchett in "Maskerade")=

http://weblog.ononlinework.de/

On 20 Jan., 13:32, Michael Meier <m... [at] privacy.net> wrote:
>
> Damit der Browser so ein Bild wirklich cached, solltest du als Header
> noch zusätzlich die Größe des Bildes in Bytes mitsenden.
>
> Ein Expires-Header, der dem Browser mitteilt, wie lange das Bild im
> Cache gehalten werden kann ohne zu veraltern (zB 1 Tag) ist sicher auch
> nicht von Nachteil.


Danke. Werde ich beides nachher ausprobieren.

Peter

On 20 Jan., 13:43, Stefan David <stefanda... [at] nurfuerspam.de> wrote:
>
> Erzeuge *eine* Grafik, in der die verschiedenen Höhen unter- bzw.
> nebeneinander angelegt sind - je nach Ausrichtung des Verlaufs. Die
> Anzahl an möglichen Hintergrundhöhen wird ja wohl endlich sein.


Endlich wahrscheinlich schon - aber ...

Der User kann unterschiedliche Schriftgrößen einstellen und
unterschiedliche Themes wählen (und damit auch Farben). Außerdem kann
die Zeilenhöhe durch automatischen Umbruch mehrfach wachsen. Und
schließlich scheint der IE padding und border auf die Zellen-Höhe
aufzuschlagen, während sie beim FF nach innen zu wachsen scheinen.
Ohne Browserweiche also nochmal zwei verschiedene Höhen:

2x - IE/FF
3x - font-size
2x - Umbruch (therotisch sogar noch mehr)
4x - Themes (bis jetzt)

Macht also schon jetzt 48 verschiedene Hintergründe. Nichts gegen
Photoshop - aber ich arbeite halt lieber mit php. Und das Script
arbeitet ja auch gut. Bis auf das Cachen halt.

Deswegen auch die Missachtung deines f'ups. Trotzdem vielen Dank für
die Anregung.

Peter

Peter Schleif wrote:
> Der User kann unterschiedliche Schriftgr=C3=B6=C3=9Fen einstellen und
> unterschiedliche Themes w=C3=A4hlen (und damit auch Farben). Au=C3=9Fer=
dem kann
> die Zeilenh=C3=B6he durch automatischen Umbruch mehrfach wachsen. Und
> schlie=C3=9Flich scheint der IE padding und border auf die Zellen-H=C3=B6=
he
> aufzuschlagen, w=C3=A4hrend sie beim FF nach innen zu wachsen scheinen.=

> Ohne Browserweiche also nochmal zwei verschiedene H=C3=B6hen:
>
> 2x - IE/FF
> 3x - font-size
> 2x - Umbruch (therotisch sogar noch mehr)
> 4x - Themes (bis jetzt)

Was ich nicht verstehe: Woher wei=C3=9Ft du denn, welche H=C3=B6he die Ze=
llen auf
dem Bildschirm des Users haben? Dir ist doch sicher bewusst, dass du
darauf so gut wie keinen Einfluss hast, oder?

Muss denn der gesamte Verlauf immer vom Anfangs- bis zum Endpunkt
sichtbar sein? Reicht nicht ein Verlauf, der sich nach der
(angenommenen) Standardh=C3=B6he richtet? Kleinere Zellen zeigen dann ebe=
n
nicht den ganzen Verlauf und gr=C3=B6=C3=9Fere enden nach z. B. 40 Pixeln=
in einer
Wiederholung der letzten Farbe. Oder du definierst diese Farbe als
Hintergrund und l=C3=A4sst die Hintergrundgrafik transparent auslaufen.

Bei 4 Themes ergibt das dann genau 4 Hintergr=C3=BCnde =E2=80=93 und die =
sollten sich
problemlos in einer Datei unterbringen lassen.

Gr=C3=BC=C3=9Fe

Der Stefan

--
"Klar wei=C3=9F ich, dass ich den Lack mit einem Tuch polieren kann, wie =
alle
Anderen das machen, ich m=C3=B6chte aber den Hammer benutzen. Wie geht da=
s?"
http://weblog.ononlinework.de/

On 20 Jan., 15:12, Stefan David <stefanda... [at] nurfuerspam.de> wrote:
>
> Was ich nicht verstehe: Woher weißt du denn, welche Höhe die Zellen au=
f
> dem Bildschirm des Users haben?

Durch JS. Ob man sich drauf verlassen sollte, dass JS eingeschaltet
ist, wäre jetzt vermutlich wirklich OT. Also:

function mouseover(tr)
{
tr.style.color =3D "#FFFFFF";
tr.style.background =3D "url(bg.php?farbe=3Dblau&height=3D" +
tr.offsetHeight + ") repeat-x";
}

>
> Muss denn der gesamte Verlauf immer vom Anfangs- bis zum Endpunkt
> sichtbar sein?

Ja.

>
> Bei 4 Themes ergibt das dann genau 4 Hintergründe - und die sollten sich=

> problemlos in einer Datei unterbringen lassen.

Die Anzahl der Dateien ist nicht das Problem; sondern die Arbeit mit
Photoshop (o.ä) auf die ich nicht gerade scharf bin. Wie Du ja selber
sagst, kann ich die Höhe der Zeile beim User nicht vorhersehen oder
gar festlegen. Um also für möglichst viele Höhen gerüstet zu sein,
müsste ich ja letztlich alle Höhen zwischen ca. 20 und 50 Pixel
entwerfen und das in allen Theme-Farben. Und auch dann wäre ich für
mögliche Extremfälle immer noch nicht gerüstet.

In der php-Klasse muss ich für jede neue Farbe nur 8 RGB-Werte
angeben. Den Rest macht dann die Methode.

Peter

On 20 Jan., 13:32, Michael Meier <m... [at] privacy.net> wrote:
> Peter Schleif schrieb:
>
> > header("Content-type: image/png");
> > header("Content-Disposition: filename=3Dbg.$farbe.$height.png");
>
> Hallo,
>
> das ist schon mal ganz gut.
>
> Damit der Browser so ein Bild wirklich cached, solltest du als Header
> noch zusätzlich die Größe des Bildes in Bytes mitsenden.

Hallo Michael. Bitte entschuldige die Verzögerung. Konnte mich leider
erst heute wieder damit beschäftigen.

Mit der Ausgabe der Dateigröße habe ich ein Problem:

Die Größe kenne ich ja erst, wenn ich mit imagepng() das Format
festgelegt habe. Dabei wird aber das Bild ja schon ausgegeben und ich
kann keinen Header mehr schreiben.

Alternativ könnte ich bei imagepng() einen Filenamen angeben und ein
TEMP-File anlegen, aber genau das möchte ich durch die direkte Ausgabe
an das Style-Sheet ja verhindern. Wenn ich doch erst in einem TMEP-
Ordner ein File erzeuge, kann ich auch gleich den Link zu diesem File
in das Style-Sheet schreiben. Aber das wollte ich ja eben nicht.

Peter