Making imitation "QQ show" virtual image

I wonder if we have ever played "QQ show"? If you play, you will want to do a similar function. But it doesn't matter if you haven't played, you can take a look at the demo below. Users can freely customize their image in the listed pictures, use in the Forum community, message, such as local image display is a good idea Oh! What do you think? You got a heartbeat? Well, let's see what this thing is all about!

In fact, the left "image Preview" image is composed of a layer of pictures, hehe, understand the layers of Photoshop technology is easy to understand. The size of each layer of the picture, the necessary display of places are adjusted to a specific range, other places are transparent. In the change of image, as long as the corresponding layer of the picture can be replaced. It is not difficult to understand, the demo only 20 pieces of images used to patchwork image (the original image has 4), but can spell a 54=625 image!

We use a specific format string to record the user's image configuration, but also based on the string to display the virtual image, the string is called configuration code. Access to the image, you can access the configuration code. Because this is so simple, there is no discussion of server-side language operations. The format of the configuration code for example is easy to understand, such as "df>2>1>0" means that the first layer of the picture named "Df.gif", the second layer is named "2.gif", the third layer is named "1.gif", there is no fourth layer. So don't name the picture "0.gif".

Let's take a look at how the virtual image is specifically implemented. The demo uses four layers to piece together an image (which you can use more layers): first-level trousers, second-coat, third-tier hairstyles, and fourth-floor hats. Each layer is placed in its own table of contents, the directory name is 1,, 2, 3, 4, that is, the same as the number of layers. In addition, the picture in the list is not the same as the patchwork image, and the list is just a thumbnail. The thumbnail for the larger figure "1.gif" is "1x.gif", and so on. In addition, each directory has a picture "df.gif", which is the default original picture for that layer.

This is where the picture is placed and the code is written so that the following sequence of code is not exactly the order in which it is shown:

<!--Place the following code where you want to display the image preview-->
<div id= "Bodyshow" style= border:1px solid #000000;p adding:0; position:relative; left:0px; top:0px; height:226px; width:140px; " ></div>
<!--This is the submission form, assigning a string representing the user image to a hidden field Userequip submit-->
<form name= "Equipform" method= "POST" action= "" >
<input name= "Userequip" type= "hidden" "value=" ">
<input name= "Saveequip" type= "Submit" value= "Save Image" >
<input name= "Toreequip" type= "button" value= "original image" >
</form>

<script language= "JavaScript" >
<!--
var myequip= "df>df>df>0"; file:// The first display of the configuration code, can be read and output by the server.

function Shoiwit (equip) {file://thisfunction by the configuration code as a parameter to display the virtual image
Showlayers=equip.split (' > ');file://to">" is a separator, assigning layers of picture names to an array showlayers[]
Str= "";
for (i=0;i<showlayers.length;i++) {
if (showlayers[i]!= ' 0 ' &&showlayers[i]!= ') {file://asIf the picture is named 0 or null, the layer is not displayed.
str+= " ";
}
}
file://MostThen overlay a completely transparent picture on the top floor so that the user can save the image on the right chain > saved as well:
str+= " ";
if (Equipform.userequip) Equipform.userequip.value=myequip=equip;file://putConfig code assignment to hidden field
BODYSHOW.INNERHTML=STR;file://DisplayShows the picture of each layer.
}
file://PageThe initial virtual image is displayed first after the surface is loaded:
Document.body.onload=new Function ("Shoiwit (Myequip)");

function Dressit (layer,img) { file://is used to replace the configuration, the parameter is the number of layers, the picture name
Showlayers=myequip.split (' > ');
Newequip= "";
for (i=0;i<showlayers.length;i++) {
if (I+1==layer) {
if (Img==showlayers[i]) newequip+= "DF"; file://If the layer is already this picture, then revert to the original picture
else newequip+=img; file:// to this picture
}
else Newequip+=showlayers[i]; file://The picture of his layer unchanged
if (i+1!=showlayers.length) newequip+= ">";
}
Shoiwit (Newequip); file://Display the latest configuration
}

-->
</script>

<!--
The following is a list of selected pictures, click on a picture to change the corresponding layer of this image
Note the link path, Javascript:dressit (4,1) represents the 4th layer to switch on/off the picture "1.gif", and so on;
But note that to the 4th layer to change/remove the picture "df.gif", you should add quotes, written javascript:dressit (4, ' DF ')
-->
<table border= "0" cellspacing= "0" cellpadding= "0" >
<tr>
&LT;TD width= "><a href=" Javascript:dressit (4,1) "></a></td>
&LT;TD width= "><a href=" Javascript:dressit (4,2) "></a></td>
&LT;TD width= "><a href=" Javascript:dressit (4,3) "></a></td>
&LT;TD width= "><a href=" Javascript:dressit (4,4) "></a></td>
</tr>
<tr>
<td><a href= "Javascript:dressit (3,1)" ></a></td>
<td><a href= "Javascript:dressit (3,2)" ></a></td>
<td><a href= "Javascript:dressit (3,3)" ></a></td>
<td><a href= "javascript:dressit (3,4)" ></a></td>
</tr>
<tr>
<td><a href= "Javascript:dressit (2,1)" ></a></td>
<td><a href= "Javascript:dressit (2,2)" ></a></td>
<td><a href= "javascript:dressit (2,3)" ></a></td>
<td><a href= "Javascript:dressit (2,4)" ></a></td>
</tr>
<tr>
<td><a href= "Javascript:dressit (1,1)" ></a></td>
<td><a href= "javascript:dressit (1,2)" ></a></td>
<td><a href= "javascript:dressit (1,3)" ></a></td>
<td><a href= "Javascript:dressit (1,4)" ></a></td>
</tr>
</table>

Click "Save Image" will be submitted to the server configuration code variable "Userequip", available server-side language for processing. To display the image elsewhere, you can select part of the code in the above code based on the annotation.