Δεν το κρύβω ότι η όλη σχέση μου με το captcha είναι σχέση μίσους. Θεωρώ την όλη διαδικασία στησίματος του σε μια φόρμα, δύσκολη, δύσχρηστη και στις περισσότερες περιπτώσεις αρνητική ως προς το εικαστικό αποτέλεσμα.

Από την άλλη το θέμα των spam messages μέσω forms, παραμένει και μάλιστα εδώ και ένα σεβαστό χρονικό διάστημα έχει ήδη ξεπεράσει τον έλεγχο που προσφέρει το captcha.

Προφανώς, την ίδια σκέψη με μένα όσον αφορά τα μειονεκτήματα του captcha έχουν κι άλλοι, γι΄αυτό βλέπω σε πολλές φόρμες, ο έλεγχος να γίνεται μέσω «λογικών ερωτήσεων» που είναι σε θέση να απαντήσει ένας άνθρωπος αλλά όχι ένα bot : 2 + 2 =, snow is hot or cold ? κλπ.

Η λύση που χρησιμοποιώ, και μέχρι στιγμής δουλεύει με 100% επιτυχία εστιάζεται καθαρά σε css. Η «πατέντα» δεν είναι δική μου, διάβασα την μεθοδολογία σε κάποιο blog που δυστυχώς δεν θυμάμαι, αποφάσισα να την χρησιμοποιήσω και δεν το έχω μετανιώσει.

Λειτουργεί απλά, γρήγορα και δεν επιφέρει κανένα μειονέκτημα στο εικαστικό αποτέλεσμα της φόρμας, ούτε ενδεχομένως μπερδεύει τον χρήστη με «λογικές ερωτήσεις».

Σε μια τυπική φόρμα με τα πεδία της, προσθέτουμε ανάμεσα τους άλλο ένα πεδίο. Ας του δώσουμε το όνομα «hfield»

<input name=»hfield» type=»text» />

H εμφάνιση της φόρμας μετά την προσθήκη του πεδίου :

Στο css file που χρησιμοποιούμε προσθέτουμε το class :

.nodisplay {display:none;}

το οποίο εν συνεχεία εφαρμόζουμε στο πεδίο hfield το οποίο διαμορφώνετε ως εξής :

<input class=»nodisplay» name=»hfield» type=»text» />

με την εφαρμογή του class στο πεδίο, η εμφάνιση της φόρμας αλλάζει και το πεδίο πλέον δεν εμφανίζεται :

Ετσι επιτυγχάνουμε τα εξής απλά : ο χρήστης δεν βλέπει κάποιο πεδίο που να τον μπερδεύει, ενώ το spam bot που θα περάσει θα «δει″ το κρυμμένο πεδίο και θα προσπαθήσει να το συμπληρώσει.

Από εκεί και πέρα εύκολα μπορούμε να ελέγξουμε κατά την αποστολή της φόρμας αν το πεδίο hfield είναι κενό ή όχι. Αν είναι κενό επιτρέπουμε στην φόρμα να αποσταλεί. Αν δεν είναι, μπλοκάρουμε τον spammer. Ας πούμε, με javascript :

if (document.myform.hfield.value != «»)  {
alert («δεν επιτρέπονται spam messages»);
return false;  }

Χρησιμοποιώ την συγκεκριμένη μέθοδο παντού με απόλυτη επιτυχία μέχρι στιγμής, χωρίς να τροποποιώ την εμφάνιση, ούτε να παιδεύομαι με captcha τεχνικές αμφιβόλου αξιοπιστίας.

Προσπαθούσα να βρω κάποια εναλλακτική του Lightbox JS το οποίο θα παρουσίαζε σε μορφή slide show ένα image set, χωρίς όμως να χρειαστεί στην σελίδα να εμφανίζονται όλες οι φωτογραφίες του.

Tα τυπικά παραδείγματα του Lightbox JS, περιλαμβάνουν την προβολή μιας image καθώς και την προβολή ενός image set με την εμφάνιση όμως όλων των φωτογραφιών αυτού του set στην σελίδα.

Kαθώς δεν βρήκα μια εύκολη και απλή λύση ώστε να την ενσωματώσω σε αυτό που ήθελα να κάνω, δημιούργησα μια μικρή παραλλαγή, όπου με την εμφάνιση μιας image ή ενός text link, μπορούμε να δούμε όλες τις φωτογραφίες του image set.

Ακολουθούμε τον κώδικα του Lightbox και στην σελίδα που θέλουμε να βάλουμε το text ή το image link, μέσω του οποίου θα μας εμφανίζεται το lightbox με το image set προσθέτουμε ένα div με τις υπόλοιπες φωτογραφίες και την απαραίτητη προσθήκη σε αυτό visibility:hidden.

<div align=»left» id=»ljs» style=»position: absolute; left: 30px; top: 0px; width: 150px; height: 150px; z-index: 5; visibility: hidden»>
<a href=»wallpapers/image-2.jpg» rel=»lightbox[wallpapers]» title=»wallpapers»></a><a href=»wallpapers/image-3.jpg» rel=»lightbox[wallpapers]» title=»wallpapers»></a><a href=»wallpapers/image-4.jpg» rel=»lightbox[wallpapers]» title=»wallpapers»></a><a href=»wallpapers/image-5.jpg» rel=»lightbox[wallpapers]» title=»wallpapers»></a><a href=»wallpapers/image-6.jpg» rel=»lightbox[wallpapers]» title=»wallpapers»></a></div>

Demo

Lightbox JS hack (text link) : demo (my wallpapers collection)

Lightbox JS hack (image link)