Geschützte Adresse für das Impressum

Jede seriöse Webseite sollte ein Impressum enthalten. Dort sollten Namen und Adresse des Inhabers und E-Mail-Adressen des Inhabers und des Administrators (Webdesigners) sichtbar sein.
Leider werden solche Daten allerdings auch gern von Adresshändlern automatisch ausgelesen und für Spam und andere kriminelle Machenschaften benutzt. Aber es gibt auch andere Anwendungen, wo man wünscht, dass Text nicht durch Spam-Bots ausgelesen werden kann (z.B. Capchas).
Die Lösung sollte ein Bild mit den Adressdaten und E-Mail sein. Aber wie viele sogenannte Captchas auch, können diese von Texterkennungsprogrammen in Bots ausgelesen werden. Die Lösung ist, das Bild erst durch einen Shredder zu jagen und im Browser wieder zusammenzusetzen. Man kann, z.B. mit dem kostenlosen Bildverarbeitungsprogramm GIMP, durch maskieren ein Bild in mehrere Einzelbilder zerlegen. Ich möchte mich hier aber mehr der Browserseite des Problems widmen.

Wie füge ich die Bilder für den Surfer im auf der Webseite wieder zu einem Bild zusammen? Ich stelle noch die Bedingung, dass das Ergebnis den Anforderungen einer XHTML strict Validierung '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">' stand hält.Um Fummelei mit den Positionsdaten zu vermeiden sollte man „.PNG“ -Dateien mit gleichen Abmaßen verwenden.

Wenn ich nur zwei Bilder übereinander setzen will, ist das noch recht einfach. Ein Bild in den Hintergrund und an derselben Position ein weiteres Bild per CSS im Vordergrund positionieren:
<img style="background-image:url(http://gameblog.weg-zum-erfolg.com/wp-content/uploads/2010/07/b1va.png)" alt="zerrissen" src="http://gameblog.weg-zum-erfolg.com/wp-content/uploads/2010/07/b2va.png>
zerrissen

Die Adresse oben besteht aus folgenden 2 Bildern, von denen man nur eins durch Rechts-Click „Grafik ansehen“ erreicht:
Adress-Teilbild1
Adress-Teilbild2

Ausführlich nachzulesen unter „CSS: Adressen vor Spam schützen“

Bei 3 und mehr Bildern kann man die Positionierung per CSS3 und „absolut“ vornehmen:

<img style="position:absolute; left:450px; top:350px; width:160px; height:120px" src="http://gameblog.weg-zum-erfolg.com/wp-content/uploads/2010/07/b1da.png" alt="" />
<img style="position:absolute; left:450px; top:350px; width:160px; height:120px" src="http://gameblog.weg-zum-erfolg.com/wp-content/uploads/2010/07/b2da.png" alt=""/>
<img style="position:absolute; left:450px; top:350px; width:160px; height:120px" src="http://gameblog.weg-zum-erfolg.com/wp-content/uploads/2010/07/b3da.png" alt=""/>




Nachteil dabei, wenn man die Seite nicht linksbündig/top einrichten möchte, rutscht die absolute Position mit Vergrößerung und Verkleinerung der Anzeige durch die Gegend, weil sie sich ja an der linken oberen Ecke des Browserfensters orientiert.
Möchte man lieber eine Orientierung am jeweiligen Eltern-Element (meist einem DIV-Container) sollte das in der CSS-Datei so aussehen:
.adressposition
{
position:absolute;
margin: auto;
padding-left: 180px;
top:240px;
}

Auf der HTML-Seite dann so:

<div class="adressposition">
<img src=".../b1da.png" alt="" width:160px; height:120px />
</div>
<div class="adressposition">
<img src=".../b2da.png" alt="" width:160px; height:120px />
</div>
<div class="adressposition">
<img src=".../b3da.png" alt="" width:160px; height:120px />
</div>

Hier das Ergebnis:

An der entsprechenden Stelle sollte natürlich freier Raum sein, am einfachsten ist eine solche Positionierung relativ weit oben auf der Seite .

Hier ein paar Beispiele, wo die Verschlüsselung der Adresse und der E-Mail Adresse so erfolgte.

www.weg-zum-erfolg.com Impressum

Stephan-Giesau.de Impressum

Schreibe einen Kommentar