CSS: Links mit Datei-Icon ergänzen
Um einem Link ein Icon hinzufügen gibt es verschiedene Möglichkeiten. JavaScript, Prefilter und CSS. Die CSS Möglichkeit möchte ich hier ein wenig näher Betrachten.
Vorab: IE6 unterstützt dies nicht.
Unter CSS2/CSS3 gibt es sogenannte Attribut-Selektoren. Attribut-Selektoren sind Teil der CSS2/CSS3 Spezifikation und extrem effektiv. Sie erlauben Dinge, die man bis jetzt nur mit Javascript machen konnte.
Die Attribut-Selektoren beziehen sich auf die Attribute von Elementen. Man kann diese Attribute (im Beispiel fett geschrieben) direkt ansprechen, auswerten und die Darstellung der dazugehörigen Elemente spezifisch definieren.
Beispiel: <a href=”” title=””> oder <img alt=”" src=”” alt=”” />
Folgende Operatoren zum Auswerten der Attribute gibt es. Als Beispiel nehmen wir hier den href Attribut einens Links. <a href=”foobar>www.camma.ch</a>
a[title]
Passt auf ein Element a mit dem Attribut title.
a[href="foobar"]
Passt auf ein Element a mit Attribut href und dem exakten Wert foobar.
a[href~="foobar"]
Passt auf ein Element a mit Attribut href, dessen durch Leerzeichen getrennte Liste von Werten foobar enthält. Würde auch auf den Attribut-Wert “foobar baz blah” zutreffen.
a[href|="foobar"]
Passt auf ein Element a mit Attribut href, dessen durch Trennstriche (-) getrennte Liste von Werten foobar enthält.
a[href^="foobar"]
Passt auf ein Element a mit Attribut href, dessen Wert mit foobar beginnt. Würde auch auf den Attribut-Wert foobarabo zutreffen.
a[href$="foobar"]
Passt auf ein Element a mit Attribut href, dessen Wert mit foobar endet. Würde auch auf den Attribut-Wert abofoobar zutreffen.
a[href*="foobar"]
Passt auf ein Element a mit Attribut href, dessen Wert foobar an beliebiger Stelle in der Zeichenkette enthält.
Beispiel für Datei-Icons
/* PDF-Links */
a[href$='.pdf'] {
background: url(../images/icon-pdf.gif) center left no-repeat;
padding-left:20px;
line-height:16px;
}
/* Excel-Links */
a[href$='.xls'], a[href$='.csv'], a[href$='.xlw'], a[href$='.xlt'] {
background: url(../images/icon-excel.gif) center left no-repeat;
padding-left:20px;
line-height:16px;
}
/* Word-Links */
a[href$='.doc'], a[href$='.rtf'], a[href$='.txt'] {
background: url(../images/icon-word.gif) center left no-repeat;
padding-left:20px;
line-height:16px;
}
/* Zip-Links */
a[href$='.zip'], a[href$='.rar'], a[href$='.gzip'] {
background: url(../images/icon-zip.gif) center left no-repeat;
padding-left:20px;
line-height:16px;
}
Externe Links / mailto:
/* mailto: Links */
a[href^="mailto:"], a[href*="UnCryptMailto"] {
background: url(../images/icon-mailto.png) center left no-repeat;
padding-left:20px;
line-height:16px;
}
/* externe: Links */
a[href^="http://"] {
background: url(../images/icon-extern.png) center right no-repeat;
padding-right:15px;
}
Natürlich kann man auch externe Links oder mailto: Links kennzeichnen. Da ich die JavaScript Funktion UnCryptMailto nutze, habe ich auch diesen Teil integriert.
Quellen
http://www.w3.org/TR/css3-selectors/
http://www.intensivstation.ch/css/selectors/attribute-selectors/
Für IE6 gibt es die Möglichkeit von jQuery:
Rebecca Murphy
Popularity: 2% [?]
Hi, könntest du mal eine Demo dazu machen? Würde mich mal interessieren wie das in “echt” aussieht.
liebe Grüße von deinem nun neuem Leser Paloran
Ein Beispiel der Anwendung findest du z.B. hier:
http://www.burchkeiser.ch/links/download.htm (PDF)
http://www.burchkeiser.ch/team/allgemeines-2.htm (E-Mail Link)
Eine eigentliche Demoseite auf der alle Icons abgebildet sind, habe ich im Moment nicht.