Hallo zusammen,

ich habe schon länger das Problem auf meiner privaten Website, dass der Mouseover-Effekt bei Bildern verzögert dargestellt wird.. Hierbei soll beim Überfahren der Grafik ein Graustufen-Bild durch ein Farb-Bild ersetzt werden.
Fährt man erstmals nach Öffnen der Website über die Grafik, verschwindet das Graustufen-Bild sofort, das Farb-Bild wird jedoch nicht unmittelbar danach angezeigt, sodass in diesem Sekundenbruchteil keine Grafik zu sehen ist, wahrscheinlich, weil das neue Bild geladen werden muss.

Ich persönlich nutze einen kostenpflichtigen Webhoster. Am Server kann es also nicht liegen, und der Rest der Website läuft einwandfrei performant..

Die Grafiken selber werden per externer CSS-Datei in die HTML-Seite eingebunden:

HTML-Code:

#bild {
  background-image: url("../img/graustufenbild.png");
  border: 1px solid #B4CDCD;
  position: absolute;
  top: 355px; left: 40px; height: 160px; width: 215px;
}
#bild:hover {
  background-image: url("../img/farbbild.png");
}

Gibt es eine Möglichkeit per CSS-Datei eingefügte Bilder vorzuladen, sodass der Effekt nahtlos inneinander übergeht?

Ich habe zu diesem Thema schon recherchiert, bisher aber nichts brauchbares gefunden..

Ich wäre für Eure Hilfestellungen sehr dankbar.


Liebe Grüße

Ich denke CSS-Sprites sind genau was du suchst:

Gut erklärt findest du es hier:
css-tricks.com

Edit:
Oder hier in deutsch:
bueltge.de

Genial! Genau das was ich gesucht habe.
Funktioniert einwandfrei und ist völlig unkompliziert.

Vielen Dank für deine Hilfe Back2toxic!