
Geschrieben von
rizzn2k
am 11.03.2009 um 12:06 Uhr.
Beiträge: 19 /
#1887
Kontakt:
Mailen
|
WWW
Nettes Gimmick und gute Erkennbarkeit von Links bietet diese Methode, Icons an Hyperlinks zu binden.
Unser Ergebnis wird später wie folgt aussehen:
STEP 1: Definieren des a-Attributs via CSS
Beachtet das unser Icon jetzt nur angezeigt wird, falls der Hyperlink auf
http:// verweißt, nicht zB. für
https://. Das Icon steht jetzt unmittelbar hinter unserem Link und kann via
padding-right beliebig verschoben werden.
a[href ^="http://"] {
background: url(images/link_href.png) center right no-repeat;
padding-right: 13px;
}
STEP 2: Sonstiges
Links welche auf Emailadressen verweisen und somit mit
mailto: arbeiten lassen sich genauso definieren:
a[href ^="mailto:"] {
background: url(../images/link_mail.png) center right no-repeat;
padding-right: 13px;
}
Anders wird es bei Hyperlinks die auf Files verweisen, bspw. ein PDF oder eine TXT. Hier geht man wie folgt vor:
a[href $=".pdf"], a[href $=".PDF"],
a[href *=".pdf#"], a[href *=".PDF#"],
a[href *=".pdf?"], a[href *=".PDF?"] {
background: url(../images/link_pdf.png) center right no-repeat;
padding-right: 13px;
}
Hier prüfen wir versch. Fälle wie so ein Link zum PDF aussehen kann.
a[href $=".pdf"] ==> http://my-site.com/data/file.pdf
a[href *=".pdf#"] ==> http://my-site.com/data/file.pdf#abschnitt1
a[href *=".pdf?"] ==> http://my-site.com/data/file.pdf?module=print
Beispiel:
Folgende Icons wurden verwendet:
http://urlgreyhot.com/personal/resources/mini_icons