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.

<a href="beispiel.html" class="my_button">Klick</a>

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.

a.my_button, a.my_button:visited {
    background-image: url(button_normal.gif);


    height: 27px;
    width: 100px;

    display: block;
}

a.my_button:hover, a.my_button:active, a.my_button:focus {
    background-image: url(button_hover.gif);
}

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.

<style type="text/css">
<!--
a.my_button, a.my_button:visited {
    background-image: url(button_normal.gif);

    height: 27px;
    width: 100px;

    display: block;
}

a.my_button:hover, a.my_button:active, a.my_button.focus {
    background-image: url(button_hover.gif);
}
-->
</style>

<a href="beispiel.html">Klick</a>

4. Text anpassen

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

a, a:visited {
    background-image: url(button_normal.gif);

    text-decoration: none;
    text-align: center;
    color: #A3BABC;
    font-size: 10px;
    font-family: verdana;

    line-height: 27px;
    vertical-align: middle;
    height: 27px;
    width: 100px;

    display: block;
}

a:hover, a:active, a:focus {
    background-image: url(button_hover.gif);

    text-decoration: none;
    color: #EDFFFF;
}

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.

<input type="submit" class="my_button" value="Klick" />

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

a.my_button, a.my_button:visited, input.my_button {
    ...
}

a:hover, a:active, a:focus, input.my_button:hover, input.my_button:focus {
    ...
}

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.

[pichfl]

ich kann diese Technik nicht empfehlen.

Nachteil: Die hover-Images werden erst nachgeladen, wenn die anfrage kommt, man müsste also einen Pre-Loader einbauen (ok, wäre auch mit css möglich, aber das ist nicht sinnvoll)


Ich werde innerhalb der nächsten 24-48 std einen Gegenentwurf präsentieren, der genaueres erklärt.



Trotzdem danke für das Tutorial. Ist gut geworden, halt nicht mehr ganz aktuell.

[Ben]

Zitat von pichfl

man müsste also einen Pre-Loader einbauen (ok, wäre auch mit css möglich

Imho ist es mit JavaScript nicht möglich Bilder vorzuladen.
Je nachdem wie groß die Hover-Bilder sind sollte das aber auch kein Beinbruch sein

Zitat von pichfl

Ich werde innerhalb der nächsten 24-48 std einen Gegenentwurf präsentieren, der genaueres erklärt.

Gerne, aber nur, wenn dort auf JavaScript verzichtet wird.

Solltest du ein Tutorial schreiben wollen, welches den gleichen Effekt mit JavaScript bietet, so melde dich bitte per PN bei mir.

Bin mal gespannt, wie dein Gegenentwurf aussieht.

Grüße Ben.

Jap das ist wohl eine negative Seite. Aber ein JS Skript das so ein 'Hoverbutton' darstellt würde genauso diese Bilder erst auf Abruf laden. Und wenn die Bilder beim JS preloaded werden kann man dies genauso mit CSS machen etc. Also von dieser Seite aus bist du mit JS genauso arm dran wie mit CSS würde ich sagen. Aber ich freue mich auf den Gegenentwurf ... freue mich immer wenn ich eine bessere Technik erlernen kann.

[Ben]

Das mit dem JavaScript habe ich ja eingeworfen und nicht er
Aber jetzt .. *psssst* ... *gespannt ist*

[MrNiceGuy]

Muha, ich weiß, wie er das machen will und ich muss sagen: Verdammt geile Idee! Echt mal nen fetten Respekt, auf sowas wäre ich nicht gekommen. Jeder, der die Antwort nicht abwarten will kann mir ja ne PN schreiben, wenn ich dann die Zeit finde, bringe ich für die Person Licht ins Dunkel, will nur hier nicht so viel Verraten

[pichfl]

1. man kann einen preloader mit javascript schreiben.
2. ich werde für meine technik keinen benötigen
3. ich kann das bereits jetzt beweisen: http://einserver.de
das menü besteht aus einer Liste, in der Hyperlinks stehen. kein preloader und trotzdem wird nix nachgeladen.

wie das funktioniert bin ich grad am erklären, wird noch etwas dauern, ich hab gestern nacht noch angefangen und bin auf karopapier schon bei 3 din-a4-seiten (mit code und beispiel)

Mooooooment ^^ ich glaub ich sollte mein Tutorial löschen. Die Idee ist echt geil hey ich freu mich schon auf dein Tutorial. Ich glaub da werd ich wohl meine Seite demnächst umstellen müssen.

[MrNiceGuy]

Zitat von pichfl

1. man kann einen preloader mit javascript schreiben.

Japp, kann man, ist aber unwichtig.

Zitat von pichfl

2. ich werde für meine technik keinen benötigen

Habe ich gesehen

Zitat von pichfl

3. ich kann das bereits jetzt beweisen: http://einserver.de
das menü besteht aus einer Liste, in der Hyperlinks stehen. kein preloader und trotzdem wird nix nachgeladen.

wie das funktioniert bin ich grad am erklären, wird noch etwas dauern, ich hab gestern nacht noch angefangen und bin auf karopapier schon bei 3 din-a4-seiten (mit code und beispiel)

Genau da habe ich nachgeschaut, da ich mir schon denken konnte, dass du das auf deiner Seite verwendest. Ist recht simpel und dazu auch noch Konform für reine Text-Browser wenn ich mich nicht irre. Ein dickes *thumbsup* für deine Methode. Aber eine Frage: Hast du dir das alleine ausgedacht oder hast du das auch nur woanders aufgegriffen?

[pichfl]

ist eine Mischtechnik aus Verschiedenen Alternativen.

Ich mische eine Image-Replacement-Methode von Mezzoblue mit dem mosue-over von Petr Staní?ek, hab aber einiges angepasst.


Ich bin mit meinem tut zur Hälfte fertig, es ist ziemlich umfangreich, da ich nix auslassen möchte.
Wie ich auch im Tut erwähnen werde, geht mein ganzer dank an Dave Shea und pixie (Petr)

[pichfl]

irgendwie verisse ich einen "edit"-button, naja, dann halt so:

wer will, kann die ersten paar Punkte des tutorials schonmal ansehen:
http://einserver.de/design/css-hover-ohne-nachladen/
ich werde das Stück für Stück updaten.


Wer Fehler findet, bitte sofort hier melden.

Edit:
Das Tutorial ist fertig

Addresse ist weiterhin: http://einserver.de/design/css-hover-ohne-nachladen/



Das tutorial richtet sich nicht an absolute anfänger, auch wenn ich komplett bei 0 beginne. Man sollte HTML schon kennen.

[Ben]

So simpel ... sooooo simpel.

Warum bin ich da nicht drauf gekommen? Super. Danke

[Suendesizer]

Na ja, nix neues. Hab aber gerade festgestellt, dass das CSS Design in Netscape 7 ziemlich verhauen daherkommt.

[pichfl]

das von meiner seite oder welches?

[Suendesizer]

Von deiner Tutorial-Seite.

Jup da hat er leider recht, die Buttons sehen im NS 7 abgeschnitten aus.

[Jann Hendrik]

bevor hier nun eine lange Diskussion dazu entsteht: kann jmd. mal dazu einen screeshot posten?

Screenshot in Netscape 7:

[pichfl]

*kopfkratz*

ist das bei den anderen Beispielen auch so?
wenn ja: schlecht.
wenn nein: hab ich wohl bei der Demo mal wieder zu viel css-hacks angewendet.


geht meine hauptseite denn richtig?

Naja lad dir doch am besten den Netscape Browser runter und teste deine Sachen.