CSS Link Generator V1.4s
Farbige Links beim Überfahren mit der Maus: Dieses Script hilft CSS Link Codes für Webseiten zu erstellen. Bei Links gibt es 4 Unterscheidungsmöglichkeiten :
- den unbesuchten Link
- den besuchten Link
- den aktiven Link (beim Anklicken)
- den Hover Effekt (beim Überfahren mit der Maus, wird nicht von allen Browsern dargestellt)
Neben unterschiedlicher Farbgebung können für jeden Typ über CSS-Anweisungen noch viele weitere Einstellungen vorgenommen werden. Leider hat der Netscape einige Schwierigkeiten mit der richtigen Interpretation der Befehle.
Im Regelfall werden für alle Typen die meisten Einstellungen gleich ausfallen. Damit nicht alle Einstellungen umständlich für jeden Typ einzeln eingegeben werden müssen, übernimmt der CSS-Generator alle Einstellungen aus den Auswahllisten auf der linken Seite für die nachfolgenden Auswahlen. Das heißt, Einstellungen unter Auswahl 1 werden automatisch auch in Auswahl 2, 3 und 4 übernommen. Einstellungen unter Auswahl 2 werden nur nachfolgend, also in Auswahl 3 und 4 übernommen usw.
Es ist nicht nötig alle Auswahlen komplett auszufüllen. Es reicht die Typen zu definieren, bei denen eine Änderung des normalen Verhaltens gewünscht wird. Bei der Schritartauswahl werden immer 3 Schriften ausgewählt. Die erste Schrift ist die aktive Schrift, in der die Links dargestellt werden. Nur wenn auf dem PC des Besuchers diese Schrift nicht installiert ist, wird die nächste usw. genommen.
Nach der Auswahl auf der linken Seite werden in den Inputfeldern rechts daneben die Parameter für die CSS-Anweisung ausgegeben. In diesen Feldern können bei Bedarf individuelle Änderungen vorgenommen werden. Diese Änderungen werden allerdings nicht in die nachfolgenden Auswahlen kopiert. Aus den Angaben in den Inputfeldern wird beim Klick auf den Button "CSS Code erstellen" der eigentliche CSS Code gebildet.
Der hier erstelle Code wirkt sich auf alle Links in der Webseite aus. Sollen auf ein und derselben Webseite Links mit unterschiedlichen Eigenschaften eingesetzt werden, sind Klassen zu definieren.
Hierzu bedarf es einer kleinen Anpassung im CSS-Code. Für jede Link-Klasse ist ganz normal ein eigener CSS-Code zu erstellen. Beispiel Originalcode:
<style type="text/css">
<!--
a:link {
font-weight:100;
color:#800080;
}
a:hover {
font-weight:900;
color:#FF0000;
}
-->
</STYLE>
Um die Klasse "cool", die Namenswahl ist jedem selber überlassen, zu definieren wird jedem Befehl (nicht den Parametern) ".cool" angehängt :
<style type="text/css">
<!--
a .cool:link {
font-weight:100;
color:#800080;
}
a .cool:hover {
font-weight:900;
color:#FF0000;
}
-->
</STYLE>
Nun muß noch jedem Link der "cool" dargestellt werden soll die Klasse zugewiesen werden. Dazu wird das Attribut class="cool" in den HTML-Code des Links eingefügt. Beispiel:
<a class="cool" href="http://www.dauerstress.de">Dauerstress</a>
Alternativ besteht auch die Möglichkeit alle CSS-Anweisungen in eine externe Datei auszulagern. Bei Änderungen muß dann nur eine Datei und nicht jede Seite bearbeitet werden.
Dazu werden die CSS-Anweisungen in einer separaten Textdatei abgespeichert. Sinnvollerweise wird diese Textdatei mit der Endung .css abgespeichert. Die Tags zum Aufruf in der Seite entfallen dabei. So sähe das für obiges Beispiel aus:
a.cool:link {
font-weight:100;
color:#800080;
}
a.cool:hover {
font-weight:900;
color:#FF0000;
}
Der Aufruf in jeder Seite erfolgt über (im HEAD-Bereich) :
<link rel="stylesheet" type="text/css" href="Datei.css">
Anstelle von Datei.css ist der Name der CSS-Datei anzugeben. Wenn sich die CSS-Datei in einem anderen Verzeichnis oder auf einem anderen Server befindet, muß an dieser Stelle eine Pfadangabe oder absolute URL eingetragen werden.
Copyright: Dauerstress - Alles kostenlos für die eigene Homepage
|
|