CodersHELL.org - Developing Community

Neuste Nachrichten

Weiterer pic24 Server eingebunden

Nachtsichtgeräte: Kinobesucher müssen

Neue Wandfarbe hält WLAN-Strahlung im Z

Malware soll mit digitalen Ameisen besei

Kernel-Log: Hauptentwicklungsphase von L

Neuste Beiträge

Eggdrop Interface - ein paar Fragen

Nach Egg Anlegen FTP-login Fehler

HowTo: mit wget ein DirectoryIndex Webve

G-MoN Output -> Excel

Uploadscript ohne FTP-Verbindung

HTML & CSS » Icon via CSS an Hyperlinks binden

Seiten: 1

[ Sie müssen angemeldet sein, um einen Beitrag zu verfassen. ]

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.

CODE

1.
2.
3.
4.

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:

CODE

1.
2.
3.
4.

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:

CODE

1.
2.
3.
4.
5.
6.

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.

CODE

1.
2.
3.

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: