|
| Custom Link-Styles |
Mit CSS lassen sich diverse TEXT-LINKS Effekte erzeugen, leider werden sie nur im M$ Exploder und Netscape 6 angezeigt (NS 4+ ignoriert die Hover Effekte).
Um diesen "HOVER" Effekt zu erzielen , baue diesen Code in den Seitenkopf ( <HEAD> ...</HEAD> ) ein:
Grundtags für den Hover Effekt in den CSS Style Sheets:
a:link { color: #000000} - Link-Farbe
inaktiv
a:active { color: #000000} - Link-Farbe
beim Draufklicken
a:visited { color: #990000} - Link-Farbe
besucht
a:hover { color: #CC0000} - Link-Farbe
bei der Mausberührung
Beispiel: LINK TEXT
Aufbau:
<style type="text/css">
<!--
A:link { color: #003399; text-decoration: underline; } (- blaue
Farbe)
A:visited { color : #666666; text-decoration: underline; } (-graue
Farbe)
A:hover {color:#990000; text-decoration: underline ;} (-rote
Farbe)
A:active {color: #990000; background: #CFDFEB; text-decoration: underline;
} (-schriftfarbe rot, hintergrund der
schrift hellblau)
//-->
</style>
Copy & Paste Style Sheet:
<style type="text/css">
<!--
A:link { color: #003399; text-decoration: underline; }
A:visited { color : #666666; text-decoration: underline; }
A:hover {color:#990000; text-decoration: underline ;}
A:active {color: #990000; background: #CFDFEB; text-decoration: underline;
}
//-->
</style>
Erweiterte Möglichkeiten:
A:link { color : #0033CC; text-decoration: none } - Normaler
Link ohne Unterstreichung
A:visited {color : #0033CC; text-decoration: none } - Angeklickter
Link ohne Unterstreichung
A:hover {color: #808080; text-decoration: underline } - Link
bei Mausberührung mit Unterstreichung
A:hover {color: #808080; text-decoration: overline } - Link
bei Mausberührung mit Überstreichung
A:active {color: #FF0000; text-decoration: none } - Aktiver
Link ohne Unterstreichung
a:link { color: #000000; text-decoration: underline; }
a:visited { color : #990000; text-decoration: underline; }
a:active { color: #990000; background: #FFFFFF; text-decoration: underline;
font-weight: bold }
a:hover { color: #FFFFFF; background: #990000; text-decoration: none; font-weight:
bold ; letter-spacing: 2px}
Link wird mit roter Farbe unterlegt und hervorgehoben: TESTLINK
Copy & Paste Style Sheet:
<style type="text/css">
<!--
a:link { color: #000000; text-decoration: underline; }
a:visited { color : #990000; text-decoration: underline; }
a:active { color: #990000; background: #FFFFFF; text-decoration: underline;
font-weight: bold }
a:hover { color: #FFFFFF; background: #990000; text-decoration: none; font-weight:
bold ; letter-spacing: 2px}
//-->
</style>
© 2001 by g¿smo