supertramp

Diese Tutorial wurde von RaZoR geschrieben.

------------------------------------------------

Das koplette Tut steht im nächsten post.

__________________
Aufstrebend, kompetent und werbefrei.
www.developers-guide.net

Mister Ad

Flor1an

// edit by supertramp:
ich habe das kompl. Tutorial hierher kopiert, damit RaZoR die Möglichkeit zum editieren hat.

Was ist ein Hoverbutton?

Unter einem Hoverbutton verstehe ich einen Link oder einen Submit Button der aus zwei Grafiken besteht. Einer die im "Normalzustand" angezeigt wird und eine die beim überfahren mit der Maus angezeigt wird.



Einleitung

Da ich schon viele Seiten gesehen habe die ihre Navigation oder sonstige Buttons mit aufwendigen Grafiken verschönern aber dabei oftmals auf umständige Javascripts, Flashanimationen oder Java Applets zurückgreifen wollte ich mal meine Technik vorstellen.

Bei Javascript, Flash oder Java Applets wird immer vom Benutzer ein zusätzliches "Plugin" benötigt! Da viele Benutzer Javascript ausgestellt haben bzw. garkein Flash oder Java Applet verfügen wird bei ihnen meist der Effekt garnicht angezeigt.

Das ganze Funktioniert allerdings auch nur mit reinem HTML und CSS! Dies hat zum Vorteil dass kein Javascript oder Plugins benötigt werden. Außerdem hat es Vorteile bei der Geschwindigkeit und der Ladezeit. HTML und CSS sind im Gegensatz zu Flash und Java Applets schnell geladen.



1. Bilder für die Buttons

Als erstes brauchen wir zwei Bilder die später den Button darstellen sollen.
Normal:
Hover:



2. HTML Code

Ein weiterer Vorteil bei dieser Lösung ist der relativ einfache und kurze HTML Code.

Das war schon alles! Mit 'class="my_button"' wird dem Link einem bestimmten CSS Element zugewiesen.



3. CSS Code

Das wichtigste am ganzen ist der CSS. Hier wird definiert dass das normale Bild angezeigt werden soll und bei einem überfahren mit der Maus das Bild zum zweiten Bild wechseln soll.

Das erste Element ist der Button im Normalzustand. (a.my_button und a.my_button:visited) Mit 'background-image' geben wir das Bild an dass im Normalzustand angezeigt werden soll. Mit 'height' und 'width' geben wir die größe des Bildes an! Dies ist notwendig da der Button sonst nur so hoch und breit wäre wie der Text im Button selber.

Wichtig ist jetzt dem 'a' Element die Eigenschaft 'block' zu geben. Dies hat den Effekt dass der Button nun die angegebene Breite und Höhe annimmt und das Hintergrundbild verwendet.

Das zweite Element ist der Button wenn die Maus über ihm ist. (a.my_button:hover und a.my_button:active) Da die Eigenschaften vom ersten Element hier übernommen werden müssen wir nur das eigentliche Bild ändern. Dies machen wir wieder mit 'background-image'.

So funktioniert jetzt schon der Button.


4. Text anpassen

Da jetzt der Text allerdings im Button noch nicht passt können wir noch folgendes machen.

Mit 'text-decoration' geben wir an das der Link beim überfahren nicht unterstrichen werden soll. 'text-align' zentriert in diesem Fall den Text, 'color' gibt die Farbe im Normalzustand bzw. im Hoverzustand an. 'font-size' und 'font-family' geben Größe und Art des Textes an.

Ein Problem ist es denn Text auch vertikal zu zentrieren. Bei Firefox und Opera kann man das durch folgendes erreichen. 'line-height' gibt die Höhe des Bereiches an in dem Text stehen kann. Normal ist die Höhe gleich der des Textes und ist am oberen Rand des Elements angesiedelt. Mit 'vertical-align' geben wir an das der Text in der Mitte zentriert werden soll. Da nun der Bereich in dem der Text steht so groß ist wie der Button wird der Text zentriert.


5. Hoverbutton bei Formularen

Auch bei Formularen kann der Submitbutton als Hoverbild gestalltet werden.

Bei dem Stylesheet (CSS) muss nun noch folgendes erweitert werden.

Hinweis: Dieser Effekt funktioniert beim Submitbutton nicht im Internet Explorer 6.0.


6. weitere Möglichkeiten

Mit dieser Methode lassen sich wunderbare Effekte erzielen. Natürlich können anstatt .jpg Bildern auch .png oder .bmp :/ Dateien verwendet werden. Was sehr gut ankommt sind .gif Animationen! Ein Bild als Link der beim Mouseover eine Animation macht kann unter umständen sehr gut Aussehen.

Es ist auch möglich hover, active und focus zu trennen. Hover und Focus können zusammenbleiben da Hover beim "Mouseover" angezeigt wird und Focus wenn das Element markiert ist. Also wenn mit der Tab Taste auf diesen Link gesprungen wurde. Aber active kann als eigenen Punkt genutzt werden. Active wird angezeigt wenn der Link "geklickt" worden ist und die Seite grade die "neue" Seite läd allerdings derweilen noch die alte anzeigt.

Es können wirklich wunderbare Dinge damit erreicht werden! Würde mich freuen wenn ihr mir eine PN oder eine Email senden würdet wenn ihr irgendwo diese Technik verwendet.


7. Beispiel

Hier noch ein paar Beispiele was man mit CSS doch alles machen kann.

Beispiel


==========

Danke nochmal an Ben und seine Seite durch die ich gesehen hab das ein "input:hover" doch funktioniert, zumindest im Firefox und in Opera.
Bens Site: www.klaile.com

// 1. Änderung am 20.05.2005
// 2. Änderung am 01.06.2005: a:focus hinzugefügt (Thx 2 flupsi)
// 3. Änderung am 25.08.2005: Punkt 6. hinzugefügt -> alter Punkt 6. wurde zu Punkt 7.

bluebird

Du scheinst Leute ned zu mögen, die den Internet Explorer verwenden, oder? Bei denen funktioniert nämlich ein CSS-Konstrukt wie input:hover mitnichten... darauf sollte man vll noch hinweisen :wink:

derHund

niemand mag die leute, die den ie wissentlich benutzen.

__________________

Sclot

j, aber macnhe könen garnichts dafür weil sie nicht die rechte haben den firefox zu installieren oder weil die höhergestellten leute das nicht wollen :/

Flor1an

auf solche hover effekte kann man auch verzichten! sie können die website um einiges verschöneren WENN er richtig eingesetzt wird. und mei wer den ie benutzt verzichtet eh auf so einiges und dann braucht der auch nicht den hover effekt zu sehen! das is meine meinung und ich werde bestimmt nicht tausend umwege gehen damit auch ie user ihren effekt sehen.

ja doof is scho aber was soll man machen. ich find es mit css ne bessere lösung als mit js. außerdem fällt das dem ie user nicht negativ auf nehm ich an. und wer möchte kann sein js trozdem verwenden dies ist ja nur ne möglichkeit

danke an bluebird für den hinweis das der effekt beim submitbutton im ie nicht funktioniert.

Warum machst du das mit dem input Element? Wenn es teil einer Navigation ist dann solltest du es mit dem a Element machen. Dann klappts auch im IE.

Ich persönlich finde ja, dass man sich die Bilder sparen kann, da man das alles auch über 'border' machen kann, was ich genau so schön finde,

so z.B. (eine sehr primitive Version, mal gerad kurz hingeschrieben):

Flor1an

Klar wenn dus in der Navigation haben willst schreibst dus natürlich mit dem a Element!

Aber angenommen du willst deine Seite einheitlich halten und braucht diese Buttons auch für Formulare dann kannst du eben nur das input Element verwenden wenn du komplett auf JS verzichten willst! Es wäre natürlich möglich dem a Element noch onClick="document.form_name.submit()" anzuhängen aber dies wäre wieder JS und darauf will ich gezielt verzichten! Heißt ja nicht das dus nicht so machen darfst :P

@Eddie: Das stimmt schon allein mit einem Rand kann sich auch viel machen wenn du z.b. auch die Hintergrundfarbe änderst! Auch mit der Breite kannst du rumspielen um so das aktive Element in der Navigation hervorzuheben! Angenommen du hast eine Navigation 100px breit. Inaktive Elemente sind 80px breit und beim Hover werden sie dann zu 100px ... als Beispiel.

Aber ich wollte eben zeigen das man eben auch Bilder sehr einfach Verändern kann und dabei komplett auf JS verzichten zu können.

Wie dus im Endeffekt machst ist egal. Geschmackssache. Aber es gibt genug Seiten die eben Bilder verwenden und dadurch sieht das ganze dann schon besser aus als nur Rahmen etc.

Zu a:active sollte man vielleicht noch a:focus hinzufügen, damit der Effekt auch auftritt, wenn die Navigation über die TAB-Taste benutzt wird.
Ansonsten danke für das anschauliche Tutorial.
Gruß
flupsi