Wenn bei externen Links Symbolen anzeigt werden sollen, gibt das einfach über CSS. Genauso können bei Links zu PDF-Dateien, E-Mail-Adressen etc. Symbole eingeblendet werden.
Fangen wir einfach an. Für eine PDF-Datei soll neben dem Link ein Symbol auftauschen. Somit versehen wird den Link noch mit einer Klasse.
<a href="/downloads/xhtml-css-kurzreferenz.pdf" class="pdf" >XHTML-CSS-Kurzreferenz
Jetzt muss im CSS noch die Datei mit dem Icon für das PDF eingebunden werden und gut ist. Ab dann wird bei jedem Link mit der Klasse "pdf" das Icon dazugeblendet.
.pdf {
padding-right: 12px;
background: url(bilder/icon-pdf.gif) right no-repeat;
}
Wenn jetzt vollkommen automatisch externe Links mit einem Icon versehen werden sollen, damit dem Besucher klar ist, dass dieser Link auf eine andere Website führt, gibt es die interessante Kombination von Attribut-Selektor in CSS3. CSS3 bedeutet hier, dass es bei alten Browsern nicht funktioniert.
a[href^='http://']
{
padding-right: 14px;
background: url(bilder/icon-link-extern.gif) right no-repeat;
}
Dieser hat die Funktion, dass bei jedem Link (HTML-TAG a), der im Attribut mit http:// beginnt das Icon eingeblendet wird.
Gibt es auf der eigene Website auch absolute Pfade, müssen diese aus dieser Regel herausgenommen werden. Dazu wird das CSS erweitert.
a[href^='http://www.webmaster-crashkurs.de']
{
padding-right: 0px;
background: none;
}
Falls Sie sowohl mit wie ohne www. haben, dann beide!
a[href^='http://webmaster-crashkurs.de'],
a[href^='http://www.webmaster-crashkurs.de']
{
padding-right: 0px;
background: none;
}