در این مقاله نحوه ساخت تصاویر امنیتی را توسط جاوااسکریپت آموزش خواهیم داد .

ابتدا صفحه Html

    <div>
        <h2>مرجع تخصصی برنامه نویسان</h2>
    <input type="text" id="txt1" runat="server"
            style="border-style: none; border-color: inherit; border-width: medium; background-color:black; color:red; font-family: 'Curlz MT'; font-size: x-large; font-weight: bold; font-variant: normal; letter-spacing: 10pt; width: 120px; background-image: url('glitter_background_b4.gif');"
            value="5AbD" />
  <input type="button" onclick="show()" value="جدید"  />
        </div>
    <asp:TextBox ID="txtverification" runat="server"></asp:TextBox>
&nbsp;&nbsp;&nbsp;&nbsp;
    <asp:Button ID="Button1" runat="server" Text="چک کردن"
        onclick="Button1_Click" />
    &nbsp;&nbsp;&nbsp;&nbsp;
    <asp:Label ID="lblmsg" runat="server" Font-Bold="True" ForeColor="Red"></asp:Label>

سپس با استفاده از دستورات زیر تصویر را میسازیم

     <script language="javascript">
         var a = 49, b = 65;
         var c = 100;
         var d = 70;
         function show() {
             if (a == 57) {
                 a = 49;
             }
             var main = document.getElementById('txt1');
             var a1 = String.fromCharCode(a);
             var b1 = String.fromCharCode(b);
             var c1 = String.fromCharCode(c);
             var d1 = String.fromCharCode(d);
             main.value = a1 + b1 + c1 + d1;
             a = a + 1;
             b = b + 1;
             c = c + 1;
             d = d + 1;
         }
  </script>

و سپس برای چک کردن صحت از کدهای زیر استفاده میکنیم

     if (txtverification.Text == txt1.Value)
            {
                lblmsg.Text = "صحیح است";
            }
            else
            {
                lblmsg.Text = "صحیح نیست";
            }

نمونه هم ضمیمه شده