<!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>
|
Download
