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: 10 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: 
<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')
//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)