Icons für Links zu Dateien

Sie können jetzt auf einfache Weise Ihre Links mit Piktogrammen/Icons versehen, die den Dateityp kennzeichnen.

Normalerweise führen Hyperlinks zu anderen Webseiten. Ist das nicht der Fall, ist es nutzerfreundlich, solche Links zu kennzeichnen. Wir bieten Ihnen dafür Piktogramme/Icons an, die die wichtigsten Dateiformate symbolisieren. Wenn Sie dem Link eine bestimmte CSS-Klasse zuweisen, wird ein entsprechendes Icon dem Link nachgestellt. (Diese CSS-Klassen nennen wir "Iconklassen").

Das funktioniert für

  • Links zu Dateien in Ihrem Verzeichnissystem
  • Links zu Dateien im WWW

Bei Wahl der Registerkarte "File" oder "External URL" im RTE-Dialogfenster "Hyperlink" enthält die "style"-Auswahlliste eine Reihe von Dateinamenserweiterungen. Wählen Sie die passende Erweiterung aus, wird der Title-Text automatisch eingesetzt. (Sie können ihn nachbearbeiten.) Nach dem Speichern sehen Sie bereits im RTE das Ergebnis.

Klicken Sie auf die Bilder, um sie groß zu machen. Sie sagen mehr als viele Worte.

Risiken und Nebenwirkungen

Voreinstellung 

Wenn ein Link mit nachgestelltem Icon am Ende einer Zeile steht, soll nicht zwischen Text und Icon umgebrochen werden, weil das zur Folge hätte, dass das Icon alleine an den Anfang der neuen Zeile platziert würde. Der unerwünschte Umbruch wird per Voreinstellung verhindert. 

Nebenwirkung

Sehr lange Links, z.B. der Titel einer Promotion, werden durch diese Voreinstellung in eine (einzige) Zeile gezwungen. Das kann zur Folge haben, dass der Benutzer den vollständigen Titel nur nach horizontalem Scrollen lesen kann. 

Abhilfen

  1. Machen Sie nur einen Teil des Titels klickbar. Formatieren Sie einen Titel beispielsweise wie folgt: Prof. Dr. Vorname Nachname: Abhandlung über ein sehr kompliziertes Thema, mit notwendigerweise einem sehr langen Titel. Verlagsort: Jahr. PDF, 4 MB
  2. Erlauben Sie den Umbruch. Um dies für alle Links mit der Iconklasse pdf zu erreichen, fügen Sie Ihren Instituts-Styles folgende Zeile hinzu: 
    a.pdf {white-space:normal;}
    Um den Umbruch für mehrere Iconklassen (im Beispiel: file, pdf, ppt, txt) zu erlauben, schreiben Sie beispielsweise: 
    a.file, a.pdf, a.ppt, a.txt {white-space:normal;}

Dokumentation der Iconklassen

Eine ausgezeichnete Dokumentation der Iconklassen finden Sie innerhalb der Dokumentation des Projekts "Barrierefreier Webauftritt der Institute der TUHH". Dort ist auch die Syntax beschrieben, mit der Sie diese CSS-Classes manuell auf Ihre Links anwenden – wenn Sie z.B. mit Content Elements vom Typ HTML arbeiten.