CSS Bilder laden bei Mouseover nach

[cournee]

Hallo,

Voraus entschuldigung, wenn dieser Thread in der falschen Kategorie gelandet sein sollte.

Ich habe schon immer ein kleines Problem beim guten alten CSS. Ich habe mit dem ":hover" Befehl ein Mouseover mit Bilddateien erstellt, wenn man jetzt die Website besucht und über das Objekt fährt, also einen Mouseover auslöst, dann lädt das Mouseover Bild erst nach. Soll heißen beim Mouseover flackert es kurz, da das Background-Bild nachlädt.

Vllt. wisst ihr ja wie man die Bilder im voraus lädt oder in den Cache des Browser ect.

PS: Ausschnitt aus dem Mouseover habe ich mir mal gespart, da dieser 100 pro valid ist. Also keine Schreibfehler ect.

:arrow: Hoffe mal jemand kennt das Problem :mrgreen:

21. September 14:41

Achja bitte nicht böse sein, wenn das Problem schon behandelt wurde :X

 

[mermshaus]

Am einfachsten ist es wohl, beide Bilder in eine Datei zu setzen und bei :hover die background-position zu verschieben. Ein Beispiel dazu habe ich hier noch liegen.

 

[prm]

Preload Images - Images vorladen mit HTML oder JavaScript

 

[cournee]

Am einfachsten ist es wohl, beide Bilder in eine Datei zu setzen und bei :hover die background-position zu verschieben. Ein Beispiel dazu habe ich hier noch liegen.

Super, danke genau das habe ich gesucht !
Das es im Beispiel mit <li> gelöst ist, ist ein
weiterer Vorteil für mich

Super Arbeit Leute, einfach Spitze !
Wirklich 1000 Dank !!!!

LG

Cournee

 

[simoptim]

Hey,

die eine Möglichkeit wurde ja schon genannt.

Wenn du diese aus irgendwelchen Gründen nicht verwenden kannst, willst... o.ä. dann gibt es noch eine.

Bau die Hover oder Aktive Bilder in ein extra <div> auf der index Seite.

z.b.

<div id="hidden">
    <img src="bilder/bild1_hover" alt="home button"/>
    <img src="bilder/bild2_hover" alt="aktuelles button"/>
</div>

im css dann noch einen style anlegen damit diese bilder nicht sichtbar sind.

#hidden {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

:razz:

grüße

 

[mermshaus]

Klick mal prms Link an. Abgesehen davon sieht das vermutlich seltsam aus, wenn Stylesheets deaktiviert sind.

 

[simoptim]

Klick mal prms Link an. Abgesehen davon sieht das vermutlich seltsam aus, wenn Stylesheets deaktiviert sind.

ah habs gesehen, da ist die möglichkeit auch aufgelistet.... mensch jetzt wollt ich mal als css anfänger weiterhelfen ..... :|

aber warum sieht das seltsam aus?
bei "zum inhalt springen" für seh behinderte macht man das doch auch:

<div class="skiplink"><a href="#content_text">Zum Inhalt springen</a></div>

 

[Rostgnom]

#hidden {
    position: absolute;
    top: -9999px;
    left: -9999px;
} [code][/QUOTE]
Wärs nicht einfacher mit [code]display: none;

?

 

[mermshaus]

bei "zum inhalt springen" für seh behinderte macht man das doch auch:

Ja, gut. Aber der Link erfüllt wenigstens noch einen gewissen Zweck, während die versteckten Mouseover-Bilder lediglich überflüssige Tags sind und bei deaktivierten Stylesheets und vielen Mouseover-Effekten richtig Raum einnehmen. Ist ein sehr theoretisches Argument, gebe ich zu. Ich mag einfach CSS-Layouts die im deaktivierten Zustand ein möglichst sauberes, lineares Dokument ergeben. :)

Bei der "Verstecken"-Methode sehe ich erstmal nur die Nachteile. Mag aber auch Fälle geben, wo es die bessere Wahl ist.

 

[Rostgnom]

Bei der "Verstecken"-Methode sehe ich erstmal nur die Nachteile.

Die wären?

 

[mermshaus]

Habe ich in meinem vorherigen Post doch aufgezählt. Die beim Verstecken zusätzlich benötigten Tags ergeben semantisch keinen Sinn (gehören nicht zur Seitenstruktur) und machen Probleme, wenn die Seite in einem Kontext verarbeitet wird, in dem kein CSS verfügbar ist. Dann können die Tags nicht einfach "ausgeblendet" werden, weil nicht zwischen einem regulären img-Tag und einem "Preload"-img-Tag unterschieden werden kann. In diesem Fall befinden sich schließlich irgendwo auf der Seite 20 Bilder mit verschiedenen MouseOver-States oder so. Das kann man in Kauf nehmen, klar, muss man aber nicht, da es reine CSS-Lösungen gibt, die den HTML-Code überhaupt nicht berühren.

Darüber kann man lange streiten, schätze ich. Theoretisch dürften die Argumente eher für "meinen" Ansatz sprechen, aber praktisch spielt so etwas selten eine Rolle, da HTML-Seiten eben in aller Regel grafisch dargestellt werden und Browser das CSS interpretieren.

*schulterzuck*