|
Effekte mit Cascading Style
Sheets
Hover-Buttons, als Buttons, die
ihre Farbe beim Überfahren mit der Maus ändern, werden im
Internet immer mehr genutzt. Für diesen Effekt sind nicht
zwei Bilder notwendig, realisiert wird das Ganze lediglich
über Cascading Style Sheets. Dargestellt wird dies jedoch
nur vom Internet Explorer ab Version 4.x, bei Netscape Browsern
passiert nichts, es kommt aber auch nicht zu Fehlermeldungen.
Es gibt verschiedene Möglichkeiten
der Darstellung eines Links:
Link
ohne normale Linkunterstreichung
<style type="text/css">
a {text-decoration:none;}
</style>
Änderung
der Linkfarbe beim Überfahren mit der Maus:
<style type="text/css">
a:hover {color:red;}
</style>
Linküberstrich
mit beim Überfahren mit der Maus:
<style type="text/css">
a:hover {text-decoration: overline }
</style>
Linkunterstrich
mit beim Überfahren mit der Maus:
<style type="text/css">
a:hover {text-decoration: underline }
</style>
Letztendlich
lassen sich die einzelnen Cascading Style Sheets zusammenpacken,
beispielsweise für einen nichtunterstrichenen Link (Schrift:
Verdana) der beim überfahren mit der Maus seine Farbe ändert
und einen Über-und Unterstrich zeigt :
<style
type="text/css">
a {font-family:Verdana,Helvetica,Arial,sans-serif;text-decoration:none;}
a:hover {color:red;}
a:hover {text-decoration: overline }
a:hover {text-decoration: underline }
</style>
Zur
Erstellung des Quellcodes für diese Buttons kann man auch
Hover-Maker nutzen.
Gestrichelte Tabellenrahmen
Um den Tabellenrahmen einer Seite nicht durchgezogen
sondern gestrichelt darzustellen braucht man ebenfalls CSS.
Einfach den folgenden Code im HEAD-Bereich einfügen.
<style
type="text/css">
<!--
td {border: 1px #000000 dashed; border-color: #000000 dashed}
-->
</style>
Wenn
nicht alle Tabellen so dargestellt werden sollen sondern einzelne
Spalten
<td
style="border: 1px #000000 dashed; border-color: #000000
dashed">
Und
das sieht dann in etwa so aus:
Nachteil: Geht aber leider nur mit dem Internet Explorer
, aber den hat ein Großteil der Surfer!
|
