692178

Spezielle Links kennzeichnen

11.02.2008 | 10:55 Uhr |

Wenn Sie auf einen Link klicken, sehen Sie im Allgemeinen erst hinterher, was es bewirkt: den ganz normalen Wechsel der Web-Seite, das Öffnen derselben in einem neuen Fenster oder Tab, einen Download oder den Beginn einer Mail. Sie können dafür sorgen, dass Sie bereits vorher Informationen über die Links erhalten. Das geht mit eigenen StyleDateien, über die Sie das Aussehen der Verknüpfungen je nach Art oder Ziel modifizieren. Dabei lassen sich die Markierungen so setzen, dass sie das Seiten-Layout nicht stören und trotzdem gut zu erkennen sind. Wir zeigen Ihnen, wie es funktioniert.

Anforderung:

Fortgeschrittener

Zeitaufwand:

Mittel

Lösung:

Unser Stylesheet :pcwLinkStyle bringt beides unter einen Hut: Es unterstreicht alle Links, wenn sich der Mauszeiger darüber befindet, auch wenn das Seiten-Layout das normalerweise unterbinden würde. Außerdem kennzeichnet es Mail-Links durch einen Briefumschlag und PDF-Downloads durch ein kleines PDF-Symbol. Links, die eine neue Seite oder ein neues Tab öffnen wollen, bekommen einen schrägen Pfeil nach rechts oben.

Die Symbole sind dem Link jeweils vorangestellt, außer bei Grafik-Links, die auf eine neue Seite führen: Da der Pfeil hier stören würde, wird das Bild nur mit einem dünnen Rahmen versehen. Javascript-Links erhalten eine 3D-Umrandung, so dass sie wie eine Schaltfläche aussehen, was ihrem Charakter eher entspricht.

Stylesheet installieren: Suchen Sie zunächst den Profilordner von Firefox. Unter Windows ist das „%appdata%\Mozilla\Firefox\Profiles“ (95/98/ME: „%windir%\Anwendungsdaten\Mozilla\Firefox\Profiles“), unter Linux „~/.mozilla/firefox“. Das Profil selbst befindet sich in einem weiteren Unterverzeichnis mit einem kryptischen Namen, der beim ersten Start von Firefox zufällig vergeben wird.

Die Stylesheet-Datei „userContent.css“ im Unterverzeichnis „chrome“ legt das Aussehen von Web-Seiten benutzerdefiniert fest. Um unser Stylesheet zu verwenden, können Sie es einfach in den Ordner „chrome“ kopieren und dann in „userContent.css“ umbenennen. Ist diese Datei schon vorhanden, öffnen Sie sie stattdessen mit einem Text-Editor und tragen als erste Zeile ein:

@import url(„pcwLinkStyle.css“);

Damit binden Sie pcwLinkStyle in das Benutzer-Stylesheet ein. Alternative: Sie benennen die mitgelieferte Beispieldatei „userContent-example.css“ um.

Eine hundertprozentige Trefferquote dürfen Sie bei solchen Stylesheets allerdings nicht erwarten: So erscheint etwa das PDFIcon immer dann, wenn ein Link auf „.pdf“ endet. Steckt in Wirklichkeit kein PDF-Dokument dahinter, ist die Anzeige falsch. Das Gleiche gilt für Links auf PDF-Dateien, die nicht korrekt auf „.pdf“ enden.

0 Kommentare zu diesem Artikel
692178