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
 

Contents

Class file image Download
<!DOCTYPE html>
<!--
/*************************************************************
 * This script is developed by Arturs Sosins aka ar2rsawseen, http://webcodingeasy.com
 * 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: 
 * http://webcodingeasy.com/JS-classes/Blur-effect
**************************************************************/
-->
<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(img_pos.top - 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>