Mit Java Script oder mit Flash gibt es schöne Möglichkeiten um Buttons zu erstellen, die sich beim Überfahren mit der Maus oder beim darauf klicken ändern, also die Schriftgröße, die Farbe oä.
Fast genauso tolle Effekte kann man mit den Pseudoformaten bei CSS erreichen, hier ein Beispiel:
Ausgangslage:
- du hast die Navigation deiner Seite als Tabelle, dass heißt, jeder deiner Links ist in einer eigenen Zelle.
Vorgehen:
- setze in den Tag jede Zelle mit einem Link, den du "animieren" möchtest den Namen einer Klasse (Class), wie du die Klasse nennen möchtest bleibt dir überlassen, ich habe den Namen "navigation" gewählt
Beispiel:
<td class="navigation"><a href="link">link</a></td>
- jetzt kannst du im css Bereich deine Angaben machen:
zB:
>Hintergrundfarbe (background-color)
>Textfarbe, (color)
>Schriftart (font-family)
>Schriftgröße (font-size)
>Textauszeichnung (text-decoration) wie unterstrichen(underline) , durchgestrichen(line-through )
und und und
dabei gelten die Angaben bei:
td.navigation a:link { } für einen Link
td.navigation a:visited { } für einen besuchten Link
td.navigation a:hover { } für einen Link bei Mouseover
td.navigation a:active { } für eine gerade angeklickten Link
td.navigation a:focus { } für einen Link der mit der TAB Taste angewählt ist.
hier ein Beispielquelltext, kopiere ihn einfach in eine leere Textdatei und speichere sie als irgendwas.html und schaue sie dir in deinem Browser an:
<!-- Beispiel Anfang -->
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
td.navigation a:link {
text-decoration: none;
font-family: "Arial";
font-size: 14px;
background-color: #FF0000;
color: #000000;
display: block;
}
td.navigation a:visited {
text-decoration: line-through;
font-family: "Arial";
font-size: 10px;
background-color: #00FF00;
color: #FF0000;
display: block;
}
td.navigation a:hover {
text-decoration: underline;
font-size: 16px;
background-color: #000000;
color: #FFFFFF;
}
td.navigation a:active {
border: double 3px #0000FF;
}
td.navigation a:focus {
background-color: #FFFFFF;
border: outset 3px #FF0000;
}
</style>
</head>
<body>
<table width="120" border="0">
<tr>
<td class="navigation"><a href="home.html">Home</a></td>
</tr>
<tr>
<td class="navigation"><a href="impressum.html">Impressum</a></td>
</tr>
</table>
</body>
</html>
<!-- Beispiel Ende -->
Na kapiert?
Noch ein paar Anmerkungen:
- Der Befehl display: block; bewirkt dass in Browsern wie Netscape oder Mozilla der Hintergrund wie im Internet Explorer die ganze Zelle ausfüllt.
- Wenn ihr ALLE Links in der Tabelle mit der gleichen Klasse auszeichnen wollt, könnt ihr auch stat in jeder Zelle einfach in den <table> tag die Klasse einfügen. Analog dazu müsst ihr dann auch im css Bereich "table.navigation" oder nur ".navigation" statt td.navigation" schreiben.
Ich hoffe das Tutorial hat euch geholfen