| E-Mail: |  info@maroufi.de |
|---|---|
| Homepage-URL: |  http://www.css-info.de/ |
| E-Mail: | konrad.u@super-sushi.de |
|---|---|
| Homepage-URL: | http://www.super-sushi.de/ |
Bei Fragen zu diesem Beitrag bitte die Autoren des Beitrags kontaktieren!
Beim Stichwort Mouseover-Buttons denkt sofort jeder an grafische Buttons zur Navigation, die per Javascript einen sogenannten Mouseover-Effekt bekommen (wie z.B. auch in SELFHTML beim Anwendungsbeispiel 
Dynamische grafische Buttons beschrieben). In diesem Artikel wollen wir Möglichkeiten aufzeigen, wie man ganz ohne Verwendung von Javascript, allein mit den Möglichkeiten, die Cascading Style Sheets bieten, derartige Mouseover-Buttons erstellen kann.
Die CSS-Syntax bietet ein recht ausgefeiltes Instrumentarium zur Formatierung an, mit dem sich nicht nur einfache Textformatierungen, wie etwa Schriftfarben und -größen, sondern zum Beispiel auch Rahmen mit 3D-Effekten erzeugen lassen. Die zunehmende Verbreitung von Browsern, die auch diese CSS-Syntax beherrschen, lässt Schranken fallen und auch auf diese Gestaltungsmöglichkeit zurückgreifen.
Bei Mouseover-Effekten mit CSS denkt natürlich jeder, der schon mit CSS gearbeitet hat, an das Pseudoformat a:hover, mit dem sich das Aussehen von Links ändern lässt, für den Fall, dass der Benutzer mit der Maus darüberfährt (engl. hover = schweben). Dieses Feature kann man verwenden, um Javascript-Code zu vermeiden.
Außerdem können Sie in diesem Artikel nachlesen, wie man auch grafische Rollover-Effekte mit CSS unter Verwendung von Hintergrundbildern background-image:url(bild.gif) erreichen kann. Dieses Verfahren hat gegenüber der Javascript-Methode den Nachteil, dass es nicht in allen Browsern funktioniert, bietet jedoch die Vorteile von weniger Aufwand bei der Erstellung sowie geringerer Übertragungsdauer.
Was ist nun der Trick an der ganzen Sache? Das Geheimnis liegt letztendlich darin, den Link als eigenen absatzbildenden Block zu definieren. Dies geschieht mittels der Positionierung display:block;. Desweiteren erreicht man mit Rahmen eine buttonartige Darstellung der Menüpunkte. Zusätzlich sind auch Angaben über die Größe des Elements zu machen. Das kann dann so aussehen:
Anzeigebeispiel: So sieht's aus
a.menu { display:block; margin-bottom:5px; text-align:center; width:16ex;
border-style:ridge; border-width:3px; padding:2px; text-decoration:none; }
a.menu:link { color:#00f; background-color:transparent; }
a.menu:visited { color:#00f; background-color:transparent; }
a.menu:hover { color:#ff0; background-color:#00f; }
a.menu:active { color:#ff0; background-color:#a03; }
Mit a.menu wird das für alle Linkzustände geltende Aussehen definiert. Dazu zählen die Absatzbildung mit display:block;, der Rahmen und die Breite, sowie der Außenabstand des Elements. Mit den einzelnen Pseudoformaten lassen sich dann die Angaben zu dem eigentlichen Mouseover-Effekt notieren, wie zum Beispiel eine bestimmte Hintergrundfarbe für a:hover.
Beachten Sie: Die Formatierung wird für die Klasse menu vorgenommen. Das gibt Ihnen die Möglichkeit, die Links im Fließtext anders zu gestalten als die in der Navigationsleiste.
Die Links lassen sich dann wiederum in ein <div></div>-Element einfügen, das den äußeren Rahmen der Navigationsleiste bildet. Im HTML Bereich kann das dann zum Beispiel so aussehen:
<div class="menu"> <a class="menu" href="index.htm">Home</a><br> <a class="menu" href="extras/index.htm">Extras</a><br> <a class="menu" href="links/index.htm">Links</a><br> <a class="menu" href="mailto:name@domain.de">E-Mail</a><br> </div>
Für den Bereich der Navigationsleiste wird ebenfalls eine eigene Unterklasse menu definiert. Dies erlaubt es, noch weitere Formatierungen, die den gesamten Navigationsbereich betreffen, vorzunehmen. Dadurch lassen sich beispielsweise eine größere Schrift, eine Hintergrundfarbe oder Abstände zur Umgebung für das Menü im Style Sheet definieren.
Experimentieren Sie mit den Angaben ein wenig herum und probieren Sie verschiedene Effekte aus. Positionieren läßt sich die Navigationsleiste über jede Methode die sie wollen: Als Frame, über eine blinde Tabelle oder ebenfalls mit CSS.
Neben dem bereits vorgestellten Beispiel 1 zeigen die folgenden drei Beispiele weitere Möglichkeiten auf, Navigationsleisten mit CSS-Buttons zu erzeugen.
Beispiel 2
Beispiel 3
Beispiel 4
Im letzten Abschnitt haben wir eine elegante Möglichkeit behandelt, mit CSS Buttons zu erstellen. Dabei hat man jedoch nicht die volle Kontrolle über das Design dieser Buttons, denn durch Hintergrundfarben, Rahmen und Abstände lassen sich zum Beispiel runde Buttons nicht erzeugen. Ein möglicher Ausweg sind grafische Buttons, die mit Javascript realisiert werden. Daran ist auch nichts auszusetzen, aber lassen Sie sich von einer anderen Methode inspirieren, die allerdings nur in neueren Browsern funktioniert. Wieder ganz ohne Javascript, nur unter Verwendung der Pseudoformate.
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Rollover mit CSS - Beispiel 5</title>
<style>
a { display:block;
background-image:url(button.gif);
width:120px; height:30px }
a:hover { background-image:url(button_on.gif); }
</style>
</head>
<body>
<h1>Bild-Button mit CSS</h1>
<p><a href="#"> </a></p>
</body>
</html>
Das Stylesheet im Kopf legt fest, dass alle normalen Links (a) mit dem Hintergrundbild button.gif angezeigt werden und alle Links, über denen die Maus darübergefahren wird mit dem Bild button_on.gif angezeigt werden.
Man sollte noch beachten, den Link als display:block anzugeben, damit Höhe und Breitenangaben richtig interpretiert werden.
Wenn verschiedene Rollovereffekte für verschiedene Buttons gewünscht sind, etwa in einer Menüleiste, dann kann man anstatt a:hover auch #button1:hover oder ähnliches schreiben, um zwischen den Buttons mit Hilfe des id-Attributs zu unterscheiden.
Die erste CSS-Methode von René funktioniert im Internet Explorer ab Version 5.0, in Netscape 6 und in Opera 5 sehr gut, die Methode für grafische Buttons nur in den ganz neuen Browsern (Version 6). Probleme bei CSS bereitet allgemein immer Netscape 4. Dieser Browser interpretiert a:hover nicht. Aufgrund seiner sehr schlechten Stylesheet-Implementation kann es sogar passieren, dass Netscape 4 die Links so stark verunstaltet, dass sie nicht mehr benutzbar sind.
Abhilfe kann hier eine Browserweiche schaffen, bei der man die Angaben, die Netscape 4 Probleme machen, vor diesem Browser versteckt.
Buttons, die auf diese Art erstellt werden, haben vor allem den Vorteil, dass sie ohne jeglichen Javascript-Code auskommen, was vor allem diejenigen freuen dürfte, die entweder kein Javascript mögen, oder es nicht beherrschen. Außerdem verringert ein Button, der aus Text statt aus Grafik besteht, die Ladezeit deutlich. Layoutänderungen auf allen Seiten gleichzeitig sind durch eine externe Stylesheetdatei auch deutlich einfacher. Auch die optische Unterscheidung von bereits besuchten Linkzielen und noch nicht besuchten ist, wie bei Textlinks üblich, möglich.
Nachteile hat diese Methode allerdings auch: Netscape 4 kann, wie bereits erläutert, nicht alle CSS-Angaben ordnungsgemäß darstellen. Der Anteil der Netscape-4-Nutzer bei den Surfern dürfte momentan noch bei etwa 5 - 8 % liegen. Die Gestaltungsmöglichkeiten von CSS-Buttons sind auch relativ begrenzt. Es sind zum Beispiel keine elliptischen Buttons möglich, auch kann man keine exotischen Schriftarten einsetzen. Anti-Aliasing-Effekte (Kantenglättung) sind ebenfalls nicht möglich. Bei einer Grafik ist die Schrift in dieser enthalten und es ist daher egal, ob diese auf dem System des Betrachters installiert ist oder nicht. Bei einem Text-Button können dagegen nur Schriftarten angezeigt werden, die auch auf dem System des Betrachters vorhanden sind.
Zuletzt möchten wir noch eine weiterführende Methode für grafische Buttons besprechen. Die in Buttons mit Bildern besprochene Methode hat den Nachteil, dass für jeden einzelnen Button je zwei Bilder geladen werden müssen. Bei grossen grafischen Menüs mit vielen Punkten kann das die Ladezeit unangenehm steigen lassen. Unterscheiden sich die Buttons nur durch einen Text im Vordergrund, kann man eine intelligente Methode verwenden, bei der insgesamt nur zwei Bilder für alle Buttons geladen werden müssen.
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Rollover-Buttons mit CSS - Beispiel 6</title>
<style type="text/css">
<!--
a {
display:block;
color:#000;
background-color:#fff;
width:100px;
padding:7px;
font-size:14px;
font-family:Verdana, Arial, sans-serif;
font-weight:bold;
text-decoration:none;
text-align:center;
margin:10px;
border:5px solid #000;
background-image:url(hinter.gif);
}
a:hover {
display:block;
color:#fff;
background-color:#000;
background-image:url(hinter_on.gif);
}
-->
</style>
</head>
<body>
<h1>Viele intelligente Buttons</h1>
<p>
<a href="#">Button1</a>
<a href="#">Button2</a>
<a href="#">Button3</a>
<a href="#">Button4</a>
</p>
</body>
</html>
Die vier Links sind als block dargestellt, um ihnen das Aussehen von Buttons zu verleihen. Ausserdem hat jeder Button ein Hintergrundbild, welches sich ändert, wenn man mit der Maus darüberfährt. Dazu ändert sich die Farbe der Links, damit man den Text vor dem veränderten dunklen Hintergrund gut lesen kann.
Es müssen nur die beiden Hintergrundbilder hinter.gif und hinter_on.gif geladen werden und nicht je zwei Bilder für jeden Button, weil der Text nicht als Bild dargestellt wird. Die Technik kann die Ladezeit verringern, funktioniert aber wiederum nicht in allen Browsern.
