Download-Link mit CSS visualisieren

Mit CSS3 ist es möglich, Download-Links mit einer Grafik zu versehen. So lässt sich ganz einfach ein entsprechender Link beispielsweise mit einem Disketten-Symbol visualisieren. Der Vorteil dabei ist, dass deine Besucher direkt sehen können, dass es sich bei diesem Link um einen Download-Link handelt.

Wie das Script aussieht, und wie du es in deine Webseite einbauen kannst, zeige ich dir in diesem Artikel.

 

Download-Link visualisieren

Im Grunde genommen gibt es zwei Möglichkeiten, wie du einen Download-Link visualisieren kannst. Bei der ersten Methode, per CSS-Klasse, musst du jedoch jeden Link mit der Klassenangabe versehen. Die zweite Methode hingegen funktioniert automatisch, was jedoch alte Browser nicht umsetzen können.

Solltest du also noch viele Zugriffe von sehr alten Browsern auf deiner Seite verzeichnen, solltest du lieber zur Klassen-Variante greifen.

 

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:

<style type="text/css">
 a[href$='.zip'] {
     padding-right: 17px;
     background: url(download.jpg) right no-repeat;
 }
 </style>

 

Erläuterung:

Alle Links, 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.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.