Grafiken mit Mouseovereffekt in CSS ohne lästigen Lagg

[BlackHawk3]

Ich grübel nun schon lange an folgendes Problem:

Ich erstelle mir einen Button.
Ich stelle ein Hintergrundbild für den Button ein.
Als Hover nehme ich dann ein anderes Hintergrundbild für den Button.
Wenn man nun mit der Maus über den Button geht, verschwindet der Button kurz (zB komplett 4eckig weiß) und dann nach ganz kurzer Zeit kommt dann das Bild vom Hovereffekt. Kann man das irgendwie vorladen lassenoder so mit HTML,CSS oder JAvaskript, damit man diesen Lagg unterbinden kann?
Ich meine ich habe noch nie eine professionelle Seite gesehen, wo dieser Effekt bei Grafikbuttons auftritt.

Liebe Grüße

 

[sokie]

AW: Grafiken mit Mouseovereffekt in CSS ohne lästigen Lagg

dafür kannst du css sprites benutzen.
Der trick ist der dass man keine unterschiedlichen dateien für zb hover und normal hat, sondern beides in einer Datei hat und beim hover nur die position der grafik ändert.
so muss nur eine grafik geladen werden, und das passiert ja ohnehin sobald der 'link' angezeigt wird.

 

[Do_St]

AW: Grafiken mit Mouseovereffekt in CSS ohne lästigen Lagg

Du müsstest so etwas damit verhindern können, dass du beide Zustände des Buttons auf ein Bild bringst und dieses dann mit Hilfe eines Divs maskierst. Im Normalzustand siehst du dann den Normalen Button und für mouseover müsstest du mittels Hover das Bild verschieben. Somit ist das Bild schon vorgeladen und es erscheint keine Weisfläche.

Ansonsten guck dir doch mal die Quellcodes und CSS Dateien großer Websites an.
(z.B mit dem Firebug für den Mozilla-Firefox, für diesen Zwecksehr gut geeignet)

Grüße

PS: Mist da war einer schneller mit dem abschicken, warum ich immer so lange Tippe?…

 

[BlackHawk3]

AW: Grafiken mit Mouseovereffekt in CSS ohne lästigen Lagg

hey coole sache mit den sprites.... das war mir bis eben noch nicht bekannt.
aber was ist denn nun eigentlich für soetwas die eleganteste lösung?
ich hab mal geschaut... ne möglichkeit wäre auch
in HTML

<img src="bild.jpg" class="unsichtbar" width="1px" height="1px">

und CSS

.unsichtbar{
	width:0px;
	height:0px;
	visibility:hidden;
}

Und dann gibt es auch noch die Möglichkeit das über ein kleines JS-Programm vorzuladen. Viele Wege führen nach Rom, doch welcher ist hier der Beste? Oder ist das egal für diesen Fall?

 

[esupanetz]

AW: Grafiken mit Mouseovereffekt in CSS ohne lästigen Lagg

Hi BlackHawk3,

JS ist bei vielen Benutzern deaktiviert, also eher nicht der ideale Weg.

lG

Eva

 

[der_fou]

AW: Grafiken mit Mouseovereffekt in CSS ohne lästigen Lagg

Das mit den sprites war mir auch neu.
... und was esupanetz betrifft, da muss ich ihr rechtgeben:
so schön die Möglichkeiten von JS auch immer sein mögen, da man damit allmöglichen Schaden anrichten kann --> deaktiviert!

 

[BlackHawk3]

AW: Grafiken mit Mouseovereffekt in CSS ohne lästigen Lagg

JA ich glaub der Weg mit den Sprites ist mir am symphatischsten^^
Aber wenn bei sovielen JS deaktiviert ist, warum ist dann zB Ajax nicht tod gegangen, das beruht ja letzendlich auch nur auf JS und ist heut am Markt immernoch verdammt wichtig?