Serverzugriff bei a:hover und background

[Olaf Schneider]

Hallo,

unter

http://aktuell.de.selfhtml.org/artikel/css/mouseover/beispiel5.htm

gibt es ja ein Beispiel für mit css implementierte Rollovers. Alles fein, funktioniert in den gängigen Browsern, aber ...

Der IE (5, 5.5, 6) lädt beim Rollover jedes Mal das in :hover definierte Bild neu. Dadurch erscheint für Sekundenbruchteile eine Sanduhr, die bei Menus mit mehreren Buttons doch recht störend wirkt.

Versuche:

Das in :hover definierte Hintergrundbild zusätzlich als img einbinden

Das in :hover definierte Hintergrundbild zusätzlich Hintergrundbild eines span einbinden

Mit JavaScript die Ressource vorladen (ärgs!)

Erfolgsquote bis jetzt: 0%.

Hat jemand eine Idee, wie man dieses Problem vermeiden kann?

Gruß
Olaf Schneider

[Maxx]

Hallo Olaf,

Der IE (5, 5.5, 6) lädt beim Rollover jedes Mal das in :hover definierte Bild neu.

wie ist das Caching eingestellt?
"Neuere Versionen der gespeicherten Seiten suchen"
 (*) bei jedem Zugriff

Dann ist das von dir geschilderte Verhalten klar ....

Grüße,

Jochen

[Olaf Schneider]

Hallo Jochen,

nein, der IE hat die Einstellung "automatisch".

Gruß
Olaf

[Ingo Turski]

Hi,

Hat jemand eine Idee, wie man dieses Problem vermeiden kann?

die hatte ich vor einer Dreiviertelstunde erst hier gepostet...

freundliche Grüße
Ingo

[Olaf Schneider]

Hallo Ingo,

danke für Deine Antwort. Den Link zu http://www.1ngo.de/web/bildwechsel.html kannte ich auch, dieser Rollover zeigt aber beim IE genau das gleiche Verhalten wie beschrieben.

Screenreader holen sich bei meiner Umsetzung den Linktext aus einem <span>, der per css versteckt ist. Das Problem img = aus und css = an ist mir auch bewusst. Eine optimale Lösung habe ich hier noch nicht gefunden.

Gruß
Olaf Schneider

[Ingo Turski]

Hi,

danke für Deine Antwort. Den Link zu http://www.1ngo.de/web/bildwechsel.html kannte ich auch, dieser Rollover zeigt aber beim IE genau das gleiche Verhalten wie beschrieben.

Dann hast Du vermutlich Deinen IE ziemlich falsch eingestellt - bei normaler Einstellung muß das Bild nicht nachgeladen werden.

freundliche Grüße
Ingo

[Olaf Schneider]

Hallo Ingo,

Dann hast Du vermutlich Deinen IE ziemlich falsch eingestellt - bei normaler Einstellung muß das Bild nicht nachgeladen werden.

Nein, „meinen IE“ habe ich nicht ziemlich falsch eingestellt. Ausserdem habe ich dieses Verhalten auf mehreren Systemen geprüft. Die Einstellungen entsprechen eher einem Standard XP-Setup, welches also auch viele User haben werden.

w0lf hat einen Link auf eine sehr gute Lösung gepostet, die genau diese (wohl nicht ganz unbekannten) Probleme behebt:

http://wellstyled.com/css-nopreload-rollovers.html

Gruß
Olaf

[Ingo Turski]

Hi,

Nein, „meinen IE“ habe ich nicht ziemlich falsch eingestellt. Ausserdem habe ich dieses Verhalten auf mehreren Systemen geprüft. Die Einstellungen entsprechen eher einem Standard XP-Setup, welches also auch viele User haben werden.

Das finde ich seltsam, denn bei meiner (wie ich denke in dieser Beziehung normalen) Einstellung funktioniert's ohne Neuladen.

w0lf hat einen Link auf eine sehr gute Lösung gepostet, die genau diese (wohl nicht ganz unbekannten) Probleme behebt

Das schon - aber so ganz gefällt mir diese Lösung nicht, weil das ohne CSS wenig Sinn ergeben würde.

freundliche Grüße
Ingo

[Orlando]

Hallo Ingo,

w0lf hat einen Link auf eine sehr gute Lösung gepostet, die genau diese (wohl nicht ganz unbekannten) Probleme behebt
Das schon - aber so ganz gefällt mir diese Lösung nicht, weil das ohne CSS wenig Sinn ergeben würde.

Was genau meinst du? Ohne CSS bleiben die normalen Verweise übrig. Im Weblog wurde der Fanshop-Link mit dieser Methode umgesetzt.

HTML:

<p id="banderole"><a href="http://aktuell.de.selfhtml.org/weblog/fanshop">Fanshop</a></p>

CSS (gekürzt):

#banderole a {  
  display:block;  
  width:0;  
  height:70px;  
  background:transparent url("http://aktuell.de.selfhtml.org/weblog/fanshop.png") no-repeat;  
  padding-left:70px;  
  clip:rect(0, 70px, 70px, 0);  
  overflow:hidden;  
}  
  
#banderole a:hover {  
  background-position:-70px 0;  
}

IE 5.x zeigt zwar nichts an, aber das ist mir egal.

Grüße
 Roland

[Ingo Turski]

Hi,

aber so ganz gefällt mir diese Lösung nicht, weil das ohne CSS wenig Sinn ergeben würde.

Was genau meinst du? Ohne CSS bleiben die normalen Verweise übrig. Im Weblog wurde der Fanshop-Link mit dieser Methode umgesetzt.

Ok, ich habe den Linktext - daß der in dieser Lösung implementiert war, hatte ich nicht beachtet; daher revidiere ich die Sinnlosigkeit. Aber selbst ohne CSS würde ich mir doch die Anzeige der Grafiken wünschen.
Davon abgesehen widerstrebt es mir ein wenig, in die CSS-Trickkiste zu greifen, wenn ich doch ein img mit alt-Attribut verwenden kann.

freundliche Grüße
Ingo

[at]

Hallo.

Davon abgesehen widerstrebt es mir ein wenig, in die CSS-Trickkiste zu greifen, wenn ich doch ein img mit alt-Attribut verwenden kann.

Das kommt darauf an. Bei zum Beispiel Logos und Signets, Portraits und Thumbnails verwende ich <img>, bei Ziergrafiken die CSS-Variante. Oder um dein alt-Attribut aufzugreifen: Wenn es tatsächlich den Bildinhalt beschreibt und damit noch als Verweis taugt, verwende ich <img>, wenn es dies nicht tut oder gar leer bleibt, eben CSS.
MfG, at

[Ingo Turski]

Hi,

Oder um dein alt-Attribut aufzugreifen: Wenn es tatsächlich den Bildinhalt beschreibt und damit noch als Verweis taugt, verwende ich <img>, wenn es dies nicht tut oder gar leer bleibt, eben CSS.

Das sehe ich genauso. Deko ist Sache von CSS, aber dann braucht man auch keinen Text anzuzeigen - weder im alt noch durch CSS versteckt.

freundliche Grüße
Ingo

[at]

Hallo.

Das sehe ich genauso.

Offenbar nicht ganz.

Deko ist Sache von CSS, aber dann braucht man auch keinen Text anzuzeigen - weder im alt noch durch CSS versteckt.

Ich verstehe darunter auch Schriftzüge, sofern es sich nicht um Logos oder Signets handelt. Diese Technik wird ja häufig angewandt, um Hausschriften zu emulieren. Persönlich vermeide ich sie aber.
MfG, at

[Ingo Turski]

Hi,

Das sehe ich genauso.

Offenbar nicht ganz.

stimmt wohl. ;-)

Ich verstehe darunter auch Schriftzüge, sofern es sich nicht um Logos oder Signets handelt. Diese Technik wird ja häufig angewandt, um Hausschriften zu emulieren. Persönlich vermeide ich sie aber.

Hier könnte ich mir in der Tat beide Varianten vorstellen mit Tendenz zu Text mit Hintergrundgrafik - besonders für den Ausdruck, um bei nicht gedruckten Bildern den Text passend formatieren zu können.

freundliche Grüße
Ingo

[fwolf]

Hallo,

Der IE (5, 5.5, 6) lädt beim Rollover jedes Mal das in :hover definierte Bild neu. Dadurch erscheint für Sekundenbruchteile eine Sanduhr, die bei Menus mit mehreren Buttons doch recht störend wirkt.

Hat jemand eine Idee, wie man dieses Problem vermeiden kann?

ja. bis jetzt ist ja anscheinend noch niemand drauf gekommen - statt das bild komplett auszuwechseln, verwendet man wie in meinem Artikel [link=http://www.data-travelers.de/2006/03/21/imagelist.html@title=Day of the Image List] beschrieben ein EINZIGES Bild, welches man im Hintergrund verschiebt, statt es komplett zu ersetzen. diese technik ist bei WellStyled.Com noch genauer beschrieben (daher hab ichs übrigens auch ;)): http://wellstyled.com/css-nopreload-rollovers.html

cu, w0lf.

[Olaf Schneider]

Hallo w0lf,

das ist ja eine coole Lösung. Abgesehen von weniger Traffic gibt es einem die Möglichkeit, eine generische css-Definition für alle Rollovers in einer Liste von Links gleicher Größe zu definieren:

ul#navi a:hover {
    background-position: -[BREITE]px 0;
}

Vielen Dank,

Gruß
Olaf