Thoughts on image verification code design

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:
HTML:
<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>
JavaScript:
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 =" http://www.bkjia.com/uploads/allimg/131015/1314441122-0.jpg "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.