CSS

Download-Link mit CSS visualisieren

Details: Veröffentlicht am Montag, 09. Februar 2009 12:29; Geschrieben von Jan Pionzewski

Mit CSS3 ist es möglich, Download-Links mit einer entsprechenden Grafik zu versehen. So lässt sich ganz einfach ein entsprechender Link beispielsweise mit einem Disketten-Symbol versehen. Der Vorteil dabei ist, dass Ihre Besucher direkt visualisiert bekommen, dass es sich bei diesem Link um einen Download-Link handelt. Dieser Artikel zeigt Ihnen, wie so etwas funktioniert.

Download-Link visualisieren

Im Grunde genommen gibt es zwei Möglichkeiten, wie Sie einen Download-Link visualisieren können. Eine Methode ist, dies per CSS-Klasse zu machen. Dabei müssten Sie jedoch jeden einzelnen Download-Link manuell kennzeichnen. Automatisch funktioniert dies mit CSS3, ist jedoch nur mit neueren Browser-Versionen kompatibel (ab Firefox 2, Internet Explorer 7 und Opera 8). Sollten Sie also Zugriffe mit vielen älteren Browsern verzeichnen, würde sich die CSS-Klasse hier eher anbieten.

Visualisierung per CSS-Klasse

Per CSS-Klasse funktioniert die Visualisierung eines Download-Links wie folgt.

Beispiel für das Stylesheet:

a.download {
background-image: url(download.gif);
padding-right: 16px;
background-repeat: no-repeat;
background-position: right;
}

Beispiel für die Einbindung im HTML-Code:

Die Datei lässt sich <a href="datei.zip" class="download">hier herunterladen</a> (2 MB).

Visualisierung mit CSS3

Einfacher ist natürlich die Visualisierung mit CSS3. Hier werden die Grafiken automatisch an alle Download-Links angefügt.

Beispiel:

Erläuterung:
Alle Hyperlinks, die mit der Endung ".zip" enden, werden in diesem Fall mit der Grafik "download.jpg" versehen. Dabei wird die Grafik 17 Pixel nach rechts versetzt vom Hyperlink angezeigt.