✔ Hover Effekt, so richtig ?

[Ibanese]

Hallo,

ich habe mich ein wenig durch das Forum gewühlt und mir meinen eigenen Hover Effekt aus CSS gebastelt.

Doch leider tritt immer ein Darstellungsfehler auf und ich glaube auch, dass das Script nicht nicht ganz so ausgereift ist, wer könnte mir auf die Sprünge helfen ?

Der Link zum Menü http://web333.server-drome.net/test/

Link zur Style Sheet Datei http://web333.server-drome.net/test/menu.css

Leider läd es auch erst die Bilder beim MouseOver, vielleicht gibt es dafür ja auch eine Lösung ...

, Ibanese

 

[daddz]

Das ist ein Fall für JavaScript! Hab ich grad gefunden: Preloader #

greetz
daddz

 

[Ibanese]

Hi,

gerade Javascript möchte ich nicht benutzen, da viele JS deaktiviert haben ...,

Ibanese

 

[versuch13]

Hi, mit JavaScript vorladen wäre eine Möglichkeit wenn deine CSS Datei so aussieht wie momentan, das heißt du hast für den normal Zustand eine extra Grafik und für den Hover Zustand eine extra Grafik. Das geht auch anders. Du nutzt nur eine Grafik für normal- und Hover Zustand und versetzt diese mit background-position.

Ich hänge einfach mal ein ganz kleines Beispiel an.


Edit: Sorry, hatte das gerade nur im IE getestet. Da fehlt noch was und zwar bei ul li a kommt text-decoration:none; dazu.


Gruß

 

[Ibanese]

Eine sehr pfiffige Idee, werde ich heute Abend gleich mal ausprobieren,

Ibanese

 

[Ibanese]

Hallo,

kann es sein, dass der Linkbereich nur dem des dahinterstehendem Text entsprechen würde. Wenn ich nur einen Buchstaben im <span> Bereich schreibe, dann ist ein großteil der ButtonFläche unverlinkt ...

, Ibanese

 

[versuch13]

Ja, sorry, hab ich noch was vergeßen.

ul li a {
 	display:block;
 	background-image:url('link.gif');
 	text-decoration:none;
 	width:100px;
 }

Also noch eine width Angabe hinzufügen. Natürlich die Weite der Grafik.


Gruß

 

[Ibanese]

Ich dank dir, das ist echt mal eine Alternative der Hover Programmierung ... Macht Spaß,

Ibanese

 

[versuch13]

Ja, das ist es. Und es läuft auch in allen neuen Browsern gleich.


Gruß

 

[Inspector]

Hi,

und noch was wg. Bilder nachladen: Per css ist das ja meist ein background-image. Pack einfach beide Bilder in eine Datei (z.B. untereinander), und dann nicht das Bild austauschen, sondern den darzustellenden Ausschnitt. Ich bin mir im Moment nicht ganz sicher, wie das heißt, aber es könnte sein, sowas wie "bckground-position: top" resp. "background-position: bottom". Bei Bedarf kannst Du Dir hier ein Beispiel ansehen, und zwar bei den Navigationsbuttons.