mouse over und traffik

[Martin]

Hello,

ich bin gerade an meiner ersten CSS webiste und habe folgendes problem.
Ich habe genau nach Anleitung ein Menu mit mouseover Effekt erstellt. Die CSS befindet sich in einer exteren Datei.

VOm prinzip klappt auch alles ganz gut. Blos wenn ich es online stelle merke ich, das immer beim überfahren der Menu-Buttons die Bilder neu geladen werden.

Das erzeugt natürlich mega traffik und macht das Menu kaputt.
Gerade bei langsameren Verbindungen ist das zu K...

Ist das normal oder mache ich irgendwas falsch ?

Probiert hab ich es bis jetzt mit dem IE. vielleicht ist das der grund ?

Thanks for your Help ;-)
Martin

###########################################
hier mal ein Auszug aus der CSS datei

a.nav:link {
display : block;
color : #f5f5f5;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10pt;
font-weight : normal;
text-align : left;
text-indent : 15pt;
line-height : 15pt;
text-decoration : none;
background-image : url(/okj/bilder/nav/nav0.gif);
background-repeat : no-repeat;
background-position : 0% 50%;
}
a.nav:visited {
display : block;
color : #778899;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10pt;
font-style : normal;
font-weight : normal;
text-align : left;
text-indent : 15pt;
line-height : 15pt;
text-decoration : none;
background-image : url(/okj/bilder/nav/nav0.gif);
background-repeat : no-repeat;
background-position : 0% 50%;
}
a.nav:hover {
display : block;
color : #ff6633;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10pt;
font-style : normal;
font-weight : bold;
text-align : left;
text-indent : 15pt;
line-height : 15pt;
text-decoration : none;
background-image : url(/okj/bilder/nav/nav1.gif);
background-repeat : no-repeat;
background-position : 0% 50%;
}
a.nav:active {
display : block;
color : #f5f5f5;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10pt;
font-style : normal;
font-weight : normal;
text-align : left;
text-indent : 15pt;
line-height : 15pt;
text-decoration : none;
background-image : url(/okj/bilder/nav/nav0.gif);
background-repeat : no-repeat;
background-position : 0% 50%;
}

####################################
und hier die html

<td width="135" height="505" valign="top">
     <a class="nav" href="/okj/">Willkommen</a>
     <a class="nav" href="/okj/Aktuelles/">Aktuelles</a>
     <a class="nav" href="/okj/Organisation/">Hintergründe</a>
     <a class="nav" href="/okj/Verein/">Verein</a>
     <a class="nav" href="/okj/ImSender/">Im Sender</a>
     <a class="nav1" href="/okj/Kontakt/">Kontakt</a>
     <a class="nav1" href="/okj/Programm/">Programm</a>
     <a class="nav1" href="#">RABATZ</a>
     <a class="nav1" href="/okj/Links">Links</a>
     <a class="nav2" href="#">Forum</a>
     <a class="nav2" href="#">Lives</a>
</td>

[Christian Seiler]

Hallo Martin,

VOm prinzip klappt auch alles ganz gut. Blos wenn ich es online stelle merke ich, das immer beim überfahren der Menu-Buttons die Bilder neu geladen werden.

Hmmm. Das scheint ein Bug im Microsoft Internet Explorer zu sein - mein 5.0er zeigt genau das gleiche Verhalten. Mozilla 1.3 und Konqueror 3.1 dagegen senden keine zusätzlichen HTTP-Requests (ich habe das mit einem im Hintergrund laufenden Netzwerkanalysetool überprüft) und Opera 6.11 mag das Beispiel unter http://www.fractatulum.de/fraccss/sample/hov2format2.htm anscheinend nicht - beim Mouseover zeigt er das Hintergrundbild bei Überfahren gar nicht an. Alles getestet unter Debian GNU/Linux testing.

Ein weiteres Problem: Bei HTTP gibt es ein sog. Feature, das »conditional get« heißt. Wenn ein Browser ein Dokument oder ein Bild schon mal geholt hat, dann wird bei der nächsten Anfrage (zum Beispiel durch ein Aktualisieren der Seite) der Server gefragt, ob die Version, die der Browser hat, noch aktuell ist. Der IE macht das hier aber auch nicht - nicht dass er nur unnötig HTTP-Requests versendet - er cached nicht mal und verursacht damit sogar doppelt unnötigen Traffic - einmal die Anfragen selbst und zum zweiten die _vollständigen_ Antworten. (bei einem »conditional get« erfolgt normalerweise nur eine »Statusantwort«, nämlich, dass die Datei noch aktuell ist - und diese Statusantwort ist meist um einiges kleiner als die Datei, um die es geht)

Tut mir leid, dass ich nicht weiterhelfen konnte...

Viele Grüße,

Christian

[Martin]

Hi Christian,

Tut mir leid, dass ich nicht weiterhelfen konnte...

Besten dank für die Antwort. Für mich heisst das also eine anderes Menu zu verwenden.
Hast du vielleicht nen tip wohin die reise gehen soll ?
Java hab ich net so gerne. (Viele schalten das in Browser aus.)

Gruß

Martin

[Christian Seiler]

Hallo Martin,

Hast du vielleicht nen tip wohin die reise gehen soll ?

Nunja, Du könntest ja per CSS ein einziges Mal das Hintergrundbild setzen und in allen anderen Deklarationen entfernen:

a.nav {
background-image : url(/okj/bilder/nav/nav0.gif);
background-repeat : no-repeat;
background-position : 0% 50%;
}
a.nav:link {
/* alles bis auf background-* */
}
a.nav:visited {
/* alles bis auf background-* */
}
a.nav:hover {
/* alles bis auf background-* */
}
a.nav:active {
/* alles bis auf background-* */
}

Danach änderst Du das Bild dynamisch per JavaScript. Diejenigen, die JS ausgeschaltet haben, sehen zumindest noch die restlichen Effekte, diejenigen, die JS angeschaltet haben, sehen auch den Hintergrundbildwechsel.

Zumindest wäre das mal mein Vorschlag - vielleicht ließe sich so das Problem umgehen, das müßtest Du mal ausprobieren.

Andererseits würde ich noch etwas warten - vielleicht meldet sich ja jemand, der dieses Problem bereits kennt und auch einen Workaround dazu kennt.

Viele Grüße,

Christian

[remuen]

Hallo zusammen

Andererseits würde ich noch etwas warten - vielleicht meldet sich ja jemand, der dieses Problem bereits kennt und auch einen Workaround dazu kennt.

Auf meiner HP benutze ich ähnliche Menüs (ebenfalls um JS nicht benutzen zu müssen), jedoch ohne Hintergrundbilder. Dann tritt das Problem glücklicherweise nicht auf.

Einen zugegebenermassen nicht im gewohnten Stil angewendeten Workaround hab ich gefunden: Schau Dich mal auf der Seite von Mudguard um http://www.andreas-waechter.de. Soweit ich's beurteilen kann, hat er damit dieses Problem elegant umschifft.

Gruss

René

[Thoralf Knuth]

Hallo,

ich kenn das Problem nur aus dem Mouse-Over-Bereich. Da ist ein funktioniereneder Work-Around, alle betreffenden Grafiken gleich im HEAD per JS einfach vorzuladen. Dann hält der IE die im Cache und dann auch bei Scripts o.usw. werden sie zumindest nicht neu geladen.

Gruss, Thoralf

[Christian Seiler]

Hallo Thoralf,

ich kenn das Problem nur aus dem Mouse-Over-Bereich. Da ist ein funktioniereneder Work-Around, alle betreffenden Grafiken gleich im HEAD per JS einfach vorzuladen. Dann hält der IE die im Cache und dann auch bei Scripts o.usw. werden sie zumindest nicht neu geladen.

Nette Idee, aber ich habe das soeben probiert - leider funktioniert das auch nicht. Der IE sendet gnadenlos einfach weitere Anfragen, egal, ob per JS vorgeladen, oder nicht.

Viele Grüße,
Christian