Thoughts on image verification code design

Source: Internet
Author: User

Since reading the book website reconstruction, the idea of website design has been fundamentally changed. More and more media in China are also paying close attention to the progress of WEB standards. Many portal websites are also starting to use standard-compliant design methods to redesign pages, such as Netease.
During this time, an interview system was created and tested in IE5.5, IE6.0, IE7.0, Firefox 2.0, and Opera 9.0 respectively using the W3C standard layout method, different vendors have improved their understanding of CSS, which reduces the workload for front-end page producers.
Well, let's talk about the design of the image verification code.
Nowadays, more and more website registration and publishing pages use the image Verification Code option to prevent some malicious programs. I wonder if you have encountered such a situation, the account information and personal information are filled in. the last verification code is too vague and cannot be seen clearly. You can only refresh the entire page to refresh the content of the image Verification Code. This is a poor interactive design.
I have referenced some portal website methods. My improved design ideas are as follows:

  1. Place the verification code entry in the first line of the form;
  2. The client can update the image verification code without refreshing the entire page.
    The following describes the implementation method of. Take ASP as an example (currently I only use ASP, ^ _ ^ ).
    The label is used to insert the Verification code, for example, , inc/code. asp is a program file for generating images. To update the verification code, you can add an update link next to the image, and click the trigger image reload event to complete the replacement of the image verification code. The Code is as follows:
    <A href = "javascript: reloadcode ();" title = "replace a verification code image"> </a> <a href =" javascript: reloadcode (); "title =" change a verification code image "> cannot see clearly. Please change one. </a>
    Function reloadcode (){
    Document. getElementById ('safecode'). src = 'inc/code. asp? '+ Math. random ();

    Screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. style. cursor = 'hand'; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "onclick =" if (! This. resized) {return true;} else {window. open ('/upload/2007129223955386.jpg');} "alt =" "src =" "onload =" if (this. width> screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "border = 0>
    One of my design interfaces

    Note: In the reloadcode function, we add a random parameter after code. asp, so that each link address is different, so as to achieve the goal of updating.
    For the first time, I wrote an original article. You are welcome to give more comments and suggestions.

    Related Article

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.