CSS

E-Mail-Link mit CSS visualisieren

Details: Veröffentlicht am Dienstag, 10. Februar 2009 11:51; Geschrieben von Jan Pionzewski

Ähnlich wie bei Download-Links, können Sie natürlich auch E-Mail-Links mit CSS visualisieren. Das funktioniert ebenso einfach und auch hier gibt es zwei Varianten, wie Sie eine Visualisierung bewerkstelligen können. Dieser Artikel erläutert, wie es funktioniert.

E-Mail-Link visualisieren

Es gibt zwei Möglichkeiten, wie Sie einen E-Mail-Link visualisieren können. Eine Methode ist, dies per CSS-Klasse zu machen. Dabei müssten Sie jedoch jeden einzelnen E-Mail-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.email {
background-image: url(email.gif);
padding-right: 20px;
background-repeat: no-repeat;
background-position: right;
}

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.

Beispiel:

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.