Links mit Dateityp-Icons via CSS

Es gibt ja verschiedene Möglichkeiten, Links über Javascript kleine Icons hinzuzufügen, die dem Benutzer anzeigen, auf was für einen Dateityp verlinkt wird oder ob es sich um einen internen oder externen Verweis handelt.

Das kann man allerdings auch sehr einfach mit reinem CSS 2.1 realisieren. Wie immer bleibt das Fossil Internet Explorer 6 außen vor, aber das Problem kennt der gestresste Webentwickler ja bereits.

Update: Wie ich inzwischen auf die harte Tour feststellen mußte, beherrscht auch der IE7 kein display:inline-block; Dumm gelaufen.
Und wie?

Wir benutzen den Attribut-Selektor für das „a“-Tag mit eckigen Klammern. Will man beispielsweise alle externen Links mit einem entsprechenden Icon versehen, dann selektiert man dies im Stylesheet über a[href^=“http://“]

1
2
3
4
5
a[href^="http://"] {
  display:inline-block;
  background: url(../images/extern.png) center right no-repeat;
  padding-right:10px;
}

Der Operator „^“ bedeutet „beginnt mit“. Deswegen fügt a[href^=“http://“] jedem externen Link der mit „http://“ beginnt, das gewählte Icon hinzu.

Der Operator $

Wie man sich vorstellen kann: wenn es „beginnt mit“ gibt, dann existiert auch ein Operator für „endet mit“. Der wird durch das Dollarzeichen „$“ repräsentiert und man kann ihn man prima mit Dateiendungen kombinieren, zum Beispiel .doc, .pdf, .xls, .zip, .rar, oder…:

Beispiel: a[href$=‘.zip‘] platziert automatisch ein Icon neben Links auf Dateien mit der Endung .zip.

1
2
3
4
5
6
a[href$='.zip'], a[href$='.rar'], a[href$='.gzip'] {
  background: url(../images/zip.png) center left no-repeat;
  display:inline-block;
  padding-left:10px;
  line-height:16px;
}

Noch mehr Beispiele

Auf diese Art und Weise kann man, wie bereits geschrieben, beliebige Links und Dateiverweise mit Icons versehen. Hier noch mehr Beispiele:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/* PDF-Links */
a[href$='.pdf'] {
  background: url(../images/pdf.png) center left no-repeat;
  display:inline-block;
  padding-left:15px;
  line-height:16px;
}
 
/* Excel-Links */
a[href$='.xls'], a[href$='.csv'], a[href$='.xlw'], a[href$='.xlt'] {
  background: url(../images/excel.png) center left no-repeat;
  display:inline-block;
  padding-left:15px;
  line-height:16px;
}
 
/* Word-Links */
a[href$='.doc'], a[href$='.rtf'], a[href$='.txt'] {
  background: url(../images/word.png) center left no-repeat;
  display:inline-block;
  padding-left:15px;
  line-height:16px;
}
 
/* mailto: Links */
a[href^="mailto:"] {
  background: url(../images/mailto.png) center left no-repeat;
  display:inline-block;
  padding-left:15px;
  line-height:16px;
}

Und Internet Explorer 6?

Wie üblich funktioniert das im IE6 nicht, es gibt aber Crossbrowser-taugliche Möglichkeiten beispielsweise via jQuery. Interessierte finden dazu einen Artikel bei Rebecca Murphey.

Keinen verwandten Inhalt gefunden.

Ihnen hat dieser Artikel gefallen oder geholfen? Prima! Dann denken Sie doch an mich, wenn Sie eine Webseite benötigen!

Dieser Eintrag wurde veröffentlicht in CSS und getagged , , , . Bookmarken: Permanent-Link. Kommentieren oder ein Trackback hinterlassen: Trackback-URL.

2 Trackbacks

  1. […] noch einsetzt ist aber selbst schuld. Wer wissen möchte wie man das mit reinem CSS löst, wirft einen Blick auf mein anderes Blog »Virtuelle Irrealität«, da habe ich das mal in einem Artikel erläutert. Weitergeben: Diese Icons verlinken auf […]

  2. […] raus. Wer wis­sen möchte, wie das tech­nisch be­werk­stel­lig wird, wirft ei­nen Blick auf mei­nen Ar­ti­kel dazu (nicht mehr ganz taufrisch). (function($){ var options = […]

Ihr Kommentar

Ihre E-Mail wird niemals veröffentlicht oder verteilt. Benötigte Felder sind mit * markiert

*
*

Du kannst diese HTML Tags und Attribute verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Time limit is exhausted. Please reload CAPTCHA.