var path ="path/to/your/js/folder/"
Some global variables.
var myCaptchNumber, randomNum
getRandomNumber is a simple function that calls makeRandoNum to collect an array of four digit Random numbers. This is stored in value. To cross check the randomly generated value, we collect that as number in myCaptchaNumber.
randomNum = new Array(makeRandomNum(),makeRandomNum(),makeRandomNum(),makeRandomNum())
var value = randomNum+""+randomNum+""+randomNum+""+randomNum
myCaptchNumber = parseInt(value)
makeRandomNum generates a random single digit number using Math.random(). Since this generates a float value, we multiply that by 10 and the round it off using Math.ceil. One small check is that if the rounded number happens to be 10 then we assign it as 0.
makeRandomNum = function()
var makeRandomNum = Math.ceil((Math.random()*10))
return (makeRandomNum > 9) ? 0 : makeRandomNum
makeImg = ""
for(var i=0; i< randomNum.length; i++)
makeImg += "<img alt="" src="your/path/to/image/folder/"+randomNum[i]+".gif"/ >"
We have the random number ready, set of images in sequence ready. All that we need to do now is display it as a HTML component and make it work. Please note the line where we generate a publickey. This variable contains md5 value of the random number and I have added some more text to make the value little more complex than md5 of simple numbers.
var backColor = (backGround)? backGround : "none"
make = "<div id=\"captcha_div\" style=\"margin:3px;\"><span id=\"captcha_p\" style=\"background-color:#"+backColor+"border:1px solid #000000;height:25px;padding-top:5px;width:135px;margin-left:-2px;margin-bottom:3px;\" align=\"center\">"+makeImage()+"</span><br />"
make += "<input id=\"submitcaptcha\" name=\"submitcaptcha\" type=\"text\" maxlength=\"4\" style=\"width:135px;\" autocomplete=\"off\"/>"
publickey = hex_md5("blowFish"+myCaptchNumber)
make += "<input id=\"submitkey\" name=\"submitkey\" type=\"hidden\" value=\""+publickey+"\" /> </div>"
The above function produces a div inside which you have a user input textbox, a hidden field with md5 value of the random number created and the set of images in a span to make it look like a single image.
How to use this file in your HTML page.
- Include this file say captcha.js in your html file.
- Type this statement where ever you want to display the captcha code.
This will give a white background to the images
The background remains transparent.
Use CSS to adjust the height,width, color and placement of the captcha element as per your website.