Nun, die CSS-Formatierung ist zwar nicht so schwer, aber nie allgemeingültig, da beim Erstellen des CSS Faktoren wie die Größe der Button, Größe und Ausrichtung der Schrift, pp. individuell eingestellt werden müssen.
Von der Funktion her ist es einfach:
Man erstellt eine ganz einfache Tabelle nur mit den Links und entsprechenden Texten dazu.
Die komplette Tabelle bekommt eine id, welche in den Stylesheets definiert ist:
<table border=0 id="nav" cellspacing=2>
<tr>
<td>[url='seite1']Seite 1[/url]</td>
</tr>
<tr>
<td>[url='seite2']Seite 2[/url]</td>
</tr>
<tr>
<td>[url='seite3']Seite 3[/url]</td>
</tr>
<tr>
<td>[url='seite4']Seite 4[/url]</td>
</tr>
<tr>
<td>Comming soon...</td>
</tr>
</table>
Alles anzeigen
Die Stylesheets dazu sehen dann z.B. so aus:
#nav a, #nav a:visited{color:#FFFFFF; font-weight:bold; font-size:11px; text-decoration:none; text-indent:10px; line-height:23px; display: block; width: 160; height:25px; padding-left:0px; background-image:url(../img/button.gif);}
#nav a:hover, #nav a:focus, #nav a:active {color:#FF0000; background-image:url(../img/button1.gif); }
Die CSS bewirken, daß eine Tabellenzelle komplett zum Link wird und einen (unbeschrifteter) Button als Hintergrundgrafik erhält. Das gilt aber nur dann, wenn sich in der Zelle ein Link befindet, ansonsten tritt die Formatierung nicht ein.
Im Beispiel haben wir einen dunklen Button, deshalb nehmen wir eine fette weiße Schrift mit 11 Pixeln und ohne Dekoration. Mit text-ident wird die Schrift 10 Pixel nach rechts gerückt, damit es nett aussieht. Damit die Schrift horizontal mittig erscheint geben wir eine Linienhöghe von 23 Pixel vor, das ist 2 Pixel weniger, als der Button hoch ist. Dabei wird berücksichtigt, daß der Button unten 2 Pixel Schatten enthält und die Schrift somit nur optisch horizental mittig steht, tatsächlich ist sie nicht in der horizentalen Zellenmitte.
Mit "display:block" wird bewirkt, daß die komplette Zelle als Link fungiert. Anschließend wird noch die Zellengröße analog zur Größe des Button festgelegt, das bereits standardmäßig vorhandene Zellenpadding für den linken Rand auf 0 gesetzt. und die Hintergrundgrafik aus einem anderen Verzeichnis geladen (button1.gif).
Damit haben wir die Standardanzeige für alle Tabellenzellen dieser ID fertig und unter allen Links taucht automatisch der Button auf.
Im nächsten Schritt wird nun für den Hover-Effekt (aber auch wenn der Link focusiert oder aktiviert wird) eine neue Schriftfarbe festgelegt und ein andere Button benannt.
Das ist alles.
Vorteile:
- funktioniert ohne Javascript,
- man kann beliebig Zellen hinzufügen oder löschen, der Effekt ist automatisch immer richtig.
Nachteil:
- man kann keine verschiedenen grafischen Button benutzen
Ergänzen sollte man das ganze dann aber doch noch mit einem kleinen Javascript, damit der 'Hover-Button' bereits vorgeladen ist, wenn man mit der Mouse das erste Mal über einen Link fährt:
<script type="text/javascript" language="JavaScript">
<!--
b1= new Image();
b1.src = "images/button1.gif";
//-->
</script>
voila ....
Ronald
EDIT:
Kleiner Nachtrag: Man kann natürlich anstatt eines Textlinkes auch einen (halb)-transparenten Grafik-Link über die Button legen, da die Button ja nur Zellenhintergrund sind. Auf diese Art kann man dann doch verschiedene grafische Button simulieren.