File: captcha_example.html

Recommend this page to a friend!
  Classes of Arturs Sosins   Blur effect   captcha_example.html   Download  
File: captcha_example.html
Role: Example script
Content type: text/plain
Description: An idea for captchas
Class: Blur effect
Apply the blur effect to HTML page elements
Author: By
Last change:
Date: 12 years ago
Size: 1,876 bytes


Class file image Download
<!DOCTYPE html> <!-- /************************************************************* * This script is developed by Arturs Sosins aka ar2rsawseen, * Feel free to distribute and modify code, but keep reference to its creator * * Blur effect class provides a blur effect on HTML elements. * It is possible to blur text, surrounding box or both. * It is also possible to blur images using SVG filters. * * For more information, examples and online documentation visit: * **************************************************************/ --> <html> <head> </head> <body> <p>Drag mouse over image to see captcha text:</p> <p><img id='image'/></p> <p>Captcha code: <input type='text' id='validate' style='text-transform: uppercase;'/> <input type='button' value='Submit' onclick='check_input()'/></p> <script type="text/javascript" src="./blur_effect.packed.js" ></script> <script type="text/javascript"> //the actuall check should be done on server side //this is just for example function check_input(){ if(document.getElementById("validate").value.toUpperCase() == '4784B') { alert("valid"); } else { alert("invalid"); } } //blur image var imgel = document.getElementById("image"); //loading image via javascript, //so if javascript is disabled, //captcha will not be shown imgel.src = "./captcha.jpeg"; imgel.onload = function(){ var img_pos = imgel.getBoundingClientRect(); var img = new blur(imgel); //adding to mouse move event document.onmousemove = function(e){ //calculate image blur var offset1 = Math.abs( - e.pageY)-20; var offset2 = Math.abs(img_pos.left - e.pageX)-100; var blur = Math.round(((offset1+offset2)/2)/10); if(blur > 0) { img.set(blur); } } } </script> </body> </html>