Download-Link mit CSS visualisieren

Du kannst ganz einfach einen Download-Link mit CSS visualisieren. So lässt sich ein Link, der zu einem Download führt, bspw. mit einem Disketten-Symbol versehen. Der Vorteil dabei ist, dass deine Besucher direkt sehen können, dass es sich bei diesem Link um einen Download handelt.

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

 

Download-Link mit CSS 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 aber die Gestaltung direkt mit CSS. Dies funktioniert jedoch erst ab CSS Version 3. Hierdurch erscheint automatisch eine Grafik neben allen Download Links.

Beispiel:

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

 

Erläuterung:

Der Browser zeigt somit alle Links, die mit der Endung .zip enden, mit der Grafik download.jpg an. Die Grafik erscheint dabei 17 Pixel nach rechts versetzt vom Link.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

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