 Emailadresse zum Kopieren (mit Spam-Schutz)
Email-Links sind immer wieder ein Problem innerhalb von Webseiten, die mit HTML umgesetzt werden. Bieten sie als Alternative ihre Emailadresse zum Kopieren an!
|
|
Emailadresse zum Kopieren anbieten
Email-Links funktionieren nicht ohne Email-Client
Email-Links innerhalb von Webseiten können ein Problem darstellen, wenn kein Email-Client installiert ist. Der Browser übernimmt nicht selbst die Abarbeitung des Emailverkehrs sondern nutzt lediglich die Möglichkeit, einen Email-Client einzubinden, um Mails zu versenden.
Ein Email-Client ist ein E-Mail-Programm wie z.B. Outlook, Mozilla Thunderbird, Eudora, ...
Hat der Seitenbesucher aber kein Emailprogramm installiert, weil er zum Versenden von Emails auf Outlook und Co. verzichtet und stattdessen das Emailportal seines Providers besucht, schlagen solche Versuche des Browsers fehl. Möglicherweise wird z.B. die Installation von Outlook eingeleitet, das ist aber auch alles. Also insgesamt ist das Vertrauen auf einen funktionierenden Email-Link eine unsichere Angelegenheit. Sie als Webmaster haben nicht wirklich die Kontrolle darüber!
Eine Alternative
a Abhilfe und Benutzerservice - Grundversion
Bieten sie als Alternative dem Seitenbesucher die Emailadresse zum Kopieren an, damit er sie problemlos in sein Online-Emailportal transferieren kann. Dazu wird die Emailadresse in einem Formularfeld dargestellt:
<form>
<input onclick="autoSelect(this);" type="Text" value="JuppZupp@xyz.de">
</form>
Die Emailadresse steht zusammenhängend als Text im Dokument, kann also von SPAM-Robots im Quelltext leicht identifiziert werden. Eine leichte Beute!
b Abhilfe und Benutzerservice - mit SPAM-Schutz
Die optische Erscheinung der Emailadresse im Formularfeld mit SPAM-Schutz entspricht der Basisversion wie oben. Es besteht allerdings ein grundlegender Unterschied bei der Notierung innerhalb des HTML-Dokuments.
Emailadresse zum Markieren anklicken
|
|
Die HTML-Anweisungen werden von einem JavaScript in das Dokument geschrieben. Dabei wird der bisher zusammenhängende Text für die Emailadresse 'zerpflückt'. Sie kann also von SPAM-Robots im Quelltext nicht mehr ohne zusätzlichen Programieraufwand identifiziert werden.
<script type="text/javascript" language="JavaScript">
<!--
// tragen sie hier die Segmente ihrer Emailadresse ein
var xname = "JuppZupp";
var xendung = "web.de";
document.write('<form>');
document.write('<input onclick="autoSelect(this);" type="Text" value="');
document.write(xname + '@' + xendung);
document.write('">');
document.write('</form>');
//-->
</script>
Kosmetik
Nun können sie die im Formularfeld zum Kopieren angebotene Emailadresse noch ein wenig hübsch verpacken, indem sie das eigentliche Input-Element und den darin dargestellten Text mit CSS formatieren. Dazu müssen sie nicht allzuviel Aufwand betreiben:
- dem Input-Element eine CSS-Klasse zuweisen
- für diese Klasse einen CSS-Anweisungsblock im Head notieren
a) JavaScript
<script type="text/javascript" language="JavaScript">
<!--
// tragen sie hier die Segmente ihrer Emailadresse ein
var xname = "JuppZupp";
var xendung = "web.de";
document.write('<form>');
document.write('<input class="Feld01" onclick="autoSelect(this);" type="Text" value="');
document.write(xname + '@' + xendung);
document.write('">');
document.write('</form>');
//-->
</script>
b) CSS-Anweisungen
.Feld01 {
font-family:Arial, sans-serif;
color:#0070C0;
font-size:12px;
border: 1px solid #EED5FF;
background-color:#FFE6FF;
height:24px;
width:200px;
padding:3px;
text-align:center;
}
... was zu diesem Resultat führt:
Emailadresse zum Markieren anklicken
|
|
... oder mit Hintergrundgrafik
.Feld01 {
font-family:Arial, sans-serif;
color:#000000;
font-size:12px;
border: 1px solid #AFAFAF;
background: url(bg-email-01.jpg) #EFEFEF;
height:24px;
width:200px;
padding:3px;
text-align:center;
}
... was zu diesem Resultat führt:
Emailadresse zum Markieren anklicken
|
|
Hintergrundgrafik zum herunterladen rechtsklicken
mehr Hintergrund ...
Weitere Hintergrundgrafiken finden sie auf meiner Seite
 Formularbuttons formatieren mit CSS 02
|
Home • Emails • Startseite