Hallo,
wollte in GOLIVE 6 einen Rollover-Effekt für Navigationsbuttons erstellen.
Im Quelltext generiert GOLIVE allerdings dafür Javascript-Code.
Kann man das nicht anders lösen, OHNE Javascript?
Danke. Chris
Hallo,
wollte in GOLIVE 6 einen Rollover-Effekt für
Navigationsbuttons erstellen.Im Quelltext generiert GOLIVE allerdings dafür
Javascript-Code.Kann man das nicht anders lösen, OHNE Javascript?
ja, geht inzwischen recht einfach - mit CSS.
-
Du legst ein Bild an, das doppelt so gross ist, wie Dein Button
-
links legst du den Buttonhintergrund für den Normal-Status an, rechts den Over-Status
-
in die CSS-Datei kommt folgendes:
a.menu {
text-decoration: none; /*der Link ist nicht unterstrichen*/
color: #C6D8EE; /*Farbe des Textes im Button*/
display: block;
margin-top: 4px; /*Abstand des Buttons zum Button darüber */
background-image: url(media/gal_back_button.gif);
background-position: leftt;
}
a.menu:hover {
background-position: right;
}
Die Links kannst Du dann einfach so anlegen:
[Start](index.php)
Im Einsatz kannst Du das ganze zB hier sehen:
http://www.gal-menden.de/relaunch/
CSS-Datei:
http://www.gal-menden.de/relaunch/templategal.css
Hintergrundbild Button:
http://www.gal-menden.de/relaunch/media/gal_back_but…
Du kannst natürlich auch für jeden Button ein eigenes Bild mit Schrift anlegen und dann einfach im Quelltext nur ein geschütztes Leerzeichen eingeben - da erhöht sich die Ladezeit natürlich wieder.
Greetinx
Christian
Hallo,
Hi,
- Du legst ein Bild an, das doppelt so gross ist, wie Dein
Button- links legst du den Buttonhintergrund für den Normal-Status
an, rechts den Over-Status- in die CSS-Datei kommt folgendes:
> a.menu {
> background-image: url(media/gal\_back\_button.gif);
> background-position: leftt;
> }
> a.menu:hover {
> background-position: right;
> }
Ah, sehr schick! Ich haette das Hintergrundbild im :hover getauscht. Das haette auch den Vorteil, …
[snip] da erhöht sich die Ladezeit natürlich wieder.
… das das der UA das :hover-Bild erst laden muss, wenn der user wirklich auf den link zeigt.
Danke (ich wusste nicht mal, was rollover sein soll),
Gruss vom Frank
Hallo,
Ah, sehr schick! Ich haette das Hintergrundbild im :hover
getauscht. Das haette auch den Vorteil, …[snip] da erhöht sich die Ladezeit natürlich wieder.
… das das der UA das :hover-Bild erst laden muss, wenn der
user wirklich auf den link zeigt.
Hat beides Vor- und Nachteile.
Wenn ich wirklich nur ein Hintergrundbild habe und davor Textlinks lege, finde ich pers. es schicker, ein Bild zu machen und die Position zu verändern.
Der User wird eh irgendwann auf einen der Links gehen und dann ist der Positionswechsel unübertroffen schnell - keine Nachladezeit, wenn das hover-Bild geladen werden muss.
Wenn ich über Hintergrundbilder verschiedene Buttons anlege, muss ich natürlich schon überlegen - da ist die Nachladezeit eines einzelnen Buttons vielleicht eher zu verschmerzen als eine hochgetriebene Gesamtladezeit.
Insgesamt aber - egal wie man sich entscheidet - eine schicke Sache, auf die ich auch erst kürzlich gestossen bin…
Greetinx
Christian
Super Idee
Hallo,
danke, super Idee - auf sowas wäre ich gar nicht gekommen.
Werde ich gleich mal probieren.
Chris