Preloaden von background-images bei a:hover

[Christian S.]

Hi,

ich habe folgendes Problem:

Ich habe mittels der a:hover Eigenschaft Links erstellt, die einen Background haben.

Es sieht also etwa so aus:

a:link
{
   background-image: url(image.jpg);
}

a:hover
{
   background-image: url(image_hover.jpg);
}

Weitere Eigenschaften wie width und height sind auch noch drin, sollen aber hier nicht berücksichtigt werden.

Das Problem ist nun, dass beim (erstmaligen) Laden der Seite, die Images des a:hover noch nicht geladen sind, und erst beim Hover geladen werden. Das gibt einen etwas unschönen Effekt, da während der Ladezeit, der Link leer ist (weiß ist oder flackert).

Bei JavaScript Hover-Buttons gibts das Problem ja auch, aber dort kann ich die Hover-Bilder ja "preloaden".

Wie mache ich das nun auch mit CSS, dass auch die Hover-Bilder schon direkt beim Laden der Seite mitgeladen werden, und nicht erst beim Hover?

Danke und Gruß
Christian

[nag]

Hallo,

da gibts nen trick.
http://www.1ngo.de/web/buttonschrift.html

mfg NAG

[Ashura]

puts "Hallo " + gets.chomp + "."

?> nag
=> Hallo nag.

da gibts nen trick.
http://www.1ngo.de/web/buttonschrift.html

Ingo hatte da eine gute Idee, doch denke ich, dass hier statt des GIF eine PNG verwendet werden sollte, da dort die Linien abgerundet und dank Halbtransparenz ein zu jeder Farbe passender Übergang geschaffen werden kann.

Und der IE... Naja, der IE halt... ;-)

Einen schönen Donnerstag noch.

Gruß, Ashura

[Ashura]

puts "Hallo " + gets.chomp + "."

?>
=> Hallo.

[...] da dort die Linien abgerundet und [...]

<del>abgerundet</del><ins>geglättet</ins>

Bevor es jemand anderes macht. ;-)

Einen schönen Donnerstag noch.

Gruß, Ashura

[Christian]

Hallo,

da gibts nen trick.
http://www.1ngo.de/web/buttonschrift.html

mfg NAG

Hi,

das ist nicht wirklich die Lösung zum Problem. Dort wird ja von einer transparenten Grafk ausgegangen. und dann nur die HintergrundFARBE geändert.

Ich suche eine Möglichkeit mit CSS Bilder prezuloaden.
Mit JavaScript werd ichs gleich versuchen.

Gruß
Christian

[Gernot Back]

Hallo Christian,

Ich suche eine Möglichkeit mit CSS Bilder prezuloaden.

Mit CSS alleine geht das in keinem Fall, allenfalls mit HTML, indem du die Bilder ggf. skaliert auf 1*1 Pixel an unauffälliger Stelle direkt in dein Dokument einbindest.

Mit JavaScript werd ichs gleich versuchen.

Die Idee find ich besser, auch wenn das natürlich nur bei aktiviertem JS funktioniert.

Gruß Gernot

[Gunnar Bittersmann]

Hi Gernot,

indem du die Bilder ggf. skaliert auf 1*1 Pixel an unauffälliger Stelle direkt in dein Dokument einbindest. […]
Die Idee [mit JavaScript] find ich besser, auch wenn das natürlich nur bei aktiviertem JS funktioniert.

Die Pixelmogelei wäre ein Kandidat für den noscript-Bereich.

Gruß,
Gunnar

[wahsaga]

hi,

Mit CSS alleine geht das in keinem Fall, allenfalls mit HTML, indem du die Bilder ggf. skaliert auf 1*1 Pixel an unauffälliger Stelle direkt in dein Dokument einbindest.

dann kannst du genauso gut einem auf 1*1px begrenzten element ein bild _per CSS_ als hintergrundbild zuweisen ;-)

gruß,
wahsaga

[Gernot Back]

Hallo wahsaga,

dann kannst du genauso gut einem auf 1*1px begrenzten element ein bild _per CSS_ als hintergrundbild zuweisen ;-)

... wobei ich mir nur nicht sicher bin, ob dieses Element nicht vielleicht sogar 0*0 Pixel haben dürfte oder visibility:hidden oder display:none um schon ein Caching zu bewirken. Ich glaube die Browser verhalten sich da durchaus unterschiedlich.

Gruß Gernot

[nag]

Hallo,

das ist nicht wirklich die Lösung zum Problem.

nach näherem durchlesen finde ich, du hast recht ;)

[http://www.andreas-kalt.de/webdesign/tutorials/menue-rollover2#punkt]
ist das, worauf ich eigentlich hinaus wollte.

mfg NAG

[Ingo Turski]

Hi,

[http://www.andreas-kalt.de/webdesign/tutorials/menue-rollover2#punkt]
ist das, worauf ich eigentlich hinaus wollte.

Für ergänzende Deko-Effekte ist die Bildverschiebung sicherlich ideal, aber nicht für komplette Linkgrafiken. Diese könnten so sehr effektiv gewechselt werden: http://www.1ngo.de/web/bildwechsel.html, wobei sich ebenfalls ein Vorladen erübrigt.

freundliche Grüße
Ingo

[at]

Hallo.

Für ergänzende Deko-Effekte ist die Bildverschiebung sicherlich ideal, aber nicht für komplette Linkgrafiken. Diese könnten so sehr effektiv gewechselt werden: http://www.1ngo.de/web/bildwechsel.html, wobei sich ebenfalls ein Vorladen erübrigt.

Allerdings legt man hier Hand an das HTML -- sofern einem dies überhaupt gestattet ist. Und für typische Ziergrafiken ist diese Form der Auszeichnung auch nicht sinnvoll.
MfG, at

[Ingo Turski]

Hi,

Für ergänzende Deko-Effekte ist die Bildverschiebung sicherlich ideal, aber nicht für komplette Linkgrafiken. Diese könnten so sehr effektiv gewechselt werden: http://www.1ngo.de/web/bildwechsel.html, wobei sich ebenfalls ein Vorladen erübrigt.

Allerdings legt man hier Hand an das HTML

ja und? Ein Linkziel muß im HTML vernünftig angegeben werden und ein IMG bietet ein ALT-Attribut, wodurch man sich die auch nicht optimalen CSS-Tricks für Screenreader erspart.

Und für typische Ziergrafiken ist diese Form der Auszeichnung auch nicht sinnvoll.

Habe ich etwas anderes behauptet? ;-)

freundliche Grüße
Ingo

[at]

Hallo.

Allerdings legt man hier Hand an das HTML
ja und?

Andere Baustelle. Die Struktur steht fest. Unveränderlich.

Ein Linkziel muß im HTML vernünftig angegeben werden und ein IMG bietet ein ALT-Attribut, wodurch man sich die auch nicht optimalen CSS-Tricks für Screenreader erspart.

Das Verweisziel ist doch bei einem grafischen Verweis das gleiche wie bei einem textlichen. Oder meinst du etwas anderes? -- Ich war übrigens bei der Fragestellung nicht von einer versuchten FIR-Lösung ausgegangen, sondern von einer zusätzlichen Hintergrundgrafik für einen Tetxtverweis.

Und für typische Ziergrafiken ist diese Form der Auszeichnung auch nicht sinnvoll.
Habe ich etwas anderes behauptet? ;-)

Das würdest du doch nie tun. Ich habe es nur noch einmal explizit erwähnen wollen.
MfG, at

[Ingo Turski]

Hi,

Ich war übrigens bei der Fragestellung nicht von einer versuchten FIR-Lösung ausgegangen, sondern von einer zusätzlichen Hintergrundgrafik für einen Tetxtverweis.

tja, Christian schrieb nur, daß "während der Ladezeit, der Link leer ist (weiß ist oder flackert)". Ich vermutete daher, daß tatsächlich kein Linktext vorhanden ist.

freundliche Grüße
Ingo

[at]

Hallo.

tja, Christian schrieb nur, daß "während der Ladezeit, der Link leer ist (weiß ist oder flackert)". Ich vermutete daher, daß tatsächlich kein Linktext vorhanden ist.

Ach so, ich hatte eine ungünstige Kombination von Vorder- und Hintergrundfarbe vermutet, da ja ohnehin eine passende Hintergrundgrafik angezeigt werden sollte.
MfG, at

[Ashura]

puts "Hallo " + gets.chomp + "."

?> Christian
=> Hallo Christian.

Bei JavaScript Hover-Buttons gibts das Problem ja auch, aber dort kann ich die Hover-Bilder ja "preloaden".

Ja, das ist richtig.

Wie mache ich das nun auch mit CSS, dass auch die Hover-Bilder schon direkt beim Laden der Seite mitgeladen werden, und nicht erst beim Hover?

Auf die selbe Art und Weise? Bilder sind Bilder, ungeachtet dessen, wo sie eingefügt werden.

Einen schönen Donnerstag noch.

Gruß, Ashura