Bild über Download-Link

[Auge]

Hallo

ich möchte über einem Download-Link ein Bild anzeigen lassen per CSS. Wenn ich also z.B. einen Link definiere und ihm eine Klasse (class="...") zuweise, soll über dem Link-Text z.B. ein ZIP-Logo erscheinen.

Und wie soll man dann den Linktext lesen können?

Bisher habe ich nur die CSS-Variante a:before gefunden, welche dann beliebigen Inhalt (auch Bilder) vor dem Link ausgibt.

Das wäre auch mein Lösungsansatz, den allerdings der meist verwandte Browser kalt lässt.

Und mit der relativen Positierung von background-image hat es auch nicht funktioniert.

Naja, ein mit background-image eingebundenes Bild bleibt halt ein _background_ image. Es ist also immer der Hintergrund des Elements, dem es zugewiesen wurde. Du kannst es nur nach den für background(-image) geltenden Regeln positionieren.

Weiß jemand Rat?

Weise das Bild dem Link zu
<a href="foo"><img src="bar" alt="Download (oder was auch immer)"></a>

Es wäre auch möglich, das Bild per CSS über den Text zu legen. Das geht aber nur, wenn man den Link mit position versieht, ihn damit zum Blockelement macht. Das würde z.B. in einer Liste von Downloads funktionieren, aber nicht innerhalb des Textflusses in einem Absatz.

Mal sehen, ob ich es noch zusammenbekomme:

<a href="foo" class="downloads">Download (oder was auch immer)<span></span></a>

a.downloads {  
position:relative; /* der Link wird aus dem normalen Dokumentfluss genommen */  
/* Weise ich dem Link keine explizite Position zu, wird er um 0 Pixel zu seiner normalen Position, also garnicht verschoben */  
/* Maße willkürlich gewählt, diese werden durch die Maße des Bildes bestimmt */  
width:100px;  
height:20px;  
}  
  
a.downloads span {  
position:absolute; /* Das span wird innerhalb des Links fest positioniert */  
z-index:1; /* Es wird in den Vordergrund gebracht */  
/* ab damit in die obere linke Ecke */  
top:0;  
left:0;  
/* span nimmt den ganzen verfügbaren Platz ein */  
width:100%;  
height:100%;  
margin:0;  
padding:0;  
/* Die Angaben zum Hintergrundbild */  
background-image:...;  
}  

Das Bild wird bei all denen (den meisten) angezeigt, die die Anzeige von Bildern aktiviert haben. Alle anderen sehen den Text.

Das ganze hat jedoch einen Nachteil. Falls jemand die Schriftgröße in seinem Browser so sehr erhöht hat, dass schlussendlich der Text des Links unter dem Bild hervorlugt, sieht es unegal aus. Dies könnte man verhindern, in dem man für a.downloads zusätzlich overflow:hidden; notiert. Lässt jemand jedoch keine Bildanzeige zu, hat eine hohe Schriftgröße eingestellt _und_ die CSS-Anweisung overflow:hidden; incl. der Größenagaben des Links werden interpretiert, kann er/sie nicht einmal den Linktext lesen da dieser (höchstwahrscheinlich) nicht in die vorgegebene Größe hineinpasst.

Dies nur zur Beachtung.

Tschö, Auge