E-Mail-Link mit CSS visualisieren

Ähnlich wie Download-Links, kannst du natürlich auch E-Mail-Links mit CSS visualisieren. Das funktioniert ebenso einfach und auch hier gibt es zwei Varianten, wie du eine Visualisierung bewerkstelligen könntest.

In diesem Artikel beschreibe ich, wie das funktioniert.

 

E-Mail-Link visualisieren

Es gibt zwei Möglichkeiten, wie du einen E-Mail-Link visualisieren kannst. Eine Methode ist, dies per CSS-Klasse zu machen. Dabei müsstest du jedoch jeden einzelnen Link entsprechend kennzeichnen.

Die andere Variante funktioniert ab CSS3 für alle Links automatisch. Dies wird aber von alten Browsern nicht unterstützt. Solltest du also noch viele Zugriffe von sehr alten Browsern auf deinen Seiten verzeichnen, solltest du lieber zur Klassen-Variante greifen.

 

Visualisierung per CSS-Klasse

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

Code-Beispiel für das Stylesheet:

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

 

Code-Beispiel für die Einbindung im HTML-Code:

Lassen Sie uns doch eine <a href="mailto:webmaster@example.org">Nachricht per E-Mail</a>zukommen.

 

Visualisierung mit CSS3

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

Code-Beispiel:

<style type="text/css">
 a[href^='mailto:'] {
   padding-right: 20px;
   background: url(email.jpg) right no-repeat;
 }
 </style>

 

Erläuterung:

Alle Hyperlinks, die mit einem mailto: beginnen, werden in diesem Fall automatisch mit der Grafik email.png gekennzeichnet. Die Grafik wird dabei 20 Pixel nach rechts versetzt vom Link angezeigt.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

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