Altbekanntes Problem: Wir wollen auf unserer Homepage anclickbare E-Mail Adressen darstellen, ohne die Adresse als Bilder darstellen zu müssen.
Hier hilft uns ein kleiner Trick weiter, denn es gibt CSS Eigenschaften, die die Leserichtung eines Textes definieren (man merke: es gibt Sprachen in denen von rechts nach links gelesen wird). Wir legen also in CSS eine Klasse für unsere "verschlüsselten" rückwärts gelesenen E-Mail Adressen an:
Wenn wir nun eine rückwärts geschriebene Mailadresse verwenden, wird diese im Browser dann wieder korrekt lesbar dargestellt: ed.rebuazotohp@ofni wäre dann folgerichtig info@photozauber.de im Quelltext, der von den Robots verarbeitet wird, steht dann ersteres.
Unser Problem besteht nun allerdings darin, dass wir einen anclickbaren Link wünschen. Hier hilft uns eine kleine Javascript Funktion die den Link für uns zusammensetzt. Die Kombination aus dem javascript und unserer CSS Klasse sieht dann für die angenommene E-Mail Adresse info@photozauber.de wie folgt aus:
Nun haben wir eine schick versteckte anclickbare Emailadresse für unsere Seite. Leider keine ungetrübte Freude:
Vorteile:
Man benötigt kein Bild und wenn Javascript deaktiviert sein sollte, ist wenigstens die E-Mail Adresse in modernen Browsern lesbar Durch den Verzicht auf Bilder kann die Emailadresse normal durch CSS formatiert und editiert werden
Nachteile:
Alte Browser wie der Netscape <=4.7 und IEx3X stellen mangels korrekter CSS Implementierung die Adresse dann rückwärts dar
Intelligentere Robots könnten in der Lage sein, die Emailadresse aus dem Javascript zu Filtern
Die Idee habe ich übrigens wie so oft von Stu Nicholls entnommen und um das Javascript erweitert.
Lust, selbst einen Artikel zu schreiben?
Das Photozauber Team dankt für jede Unterstützung Eurerseits.