When you want to buy clothes, you must try on firstly. It is same with the online clothes. You can try on clothes in some online games or online shops. But do you know how we can make a web page that allows the viewers to try on clothes they like? In fact, it is very easy to achieve. Further, it is very common and funny. You will like to learn it. We just need to insert some layers and definite some behaviors. Now follow me and I will tell you how to make it.

Dreamweaver 8.0 Tutorial ---- How To Try On Clothes Online 001

Step1

Open the insert inspector. Click the Draw Layout Cell button in the Insert inspector. Then draw three layers.

Dreamweaver 8.0 Tutorial ---- How To Try On Clothes Online 002

Step2

Put the images into the three layers. Like the following image.

Dreamweaver 8.0 Tutorial ---- How To Try On Clothes Online 003

Step3

Put the mouse on the edge of the “coat” layer. Then move the “coat” layer on the “boy” layer.

Step4

Put the trousers on the “boy” layer in the same way. The effect is like the following image showing.

Dreamweaver 8.0 Tutorial ---- How To Try On Clothes Online 004

Step5

Set focus on the blank page, and open the behavior inspector. Then click the Dreamweaver 8.0 Tutorial ---- How To Try On Clothes Online 005  button, and select “Drag Layer”. Fill the drag layer dialog box like the following image. Then click OK button. Rule out the same way to the layer3.

Dreamweaver 8.0 Tutorial ---- How To Try On Clothes Online 006

 

Dreamweaver 8.0 Tutorial ---- How To Try On Clothes Online 007

Step6

Save the document and press F12 button to preview in the explorer.

Like the following image. When you click the coat, it will move on the boy’s body.

Dreamweaver 8.0 Tutorial ---- How To Try On Clothes Online 008 Dreamweaver 8.0 Tutorial ---- How To Try On Clothes Online 009

OK. The final effect is ready. Do you remember how to make it? Have you master the way to achieve this special effect? Let us look it back. Firstly, we need to insert three layers. Secondly, we put the images into the layers. Thirdly, we have to definite the behaviors of the layers in the drag layers dialog box. That is all. Practice it again.

Related Posts