Hello,
I don’t know if this question fits in to this forum at all, but couldn’t stop asking. 
May be this is more of a design question rather than JavaScript but guess many of you will have experience in these things.
Can anyone tell me whats exactly happening behind the scenes in this link.
http://www.shirtsmyway.com/design_myshirt.php
One of the members already pointed out that the website is using transparent layered images to bring the effect. Now, my question is, are they real images or is a texture really applied to a frame on the fly?
I can imagine bringing that effect by using Photoshop filters but how can we do it for Stripes and Checks. If you notice the sleeve for a stripes shirt, you can see that the stripes are aligned as if it were a real shirt. Do we need real photos of shirts for this?
Thank You.
The transparent textures are applied on the fly, stacked on top of each other within a div element.
Here is the HTML code they use for one of the stripped shirts:
<div id="fabric_design_details_middle_picture_view1" class="">
<img src="graphics/blank.gif" id="shirtModelIndexView1_4" name="noloops" title="noloops" style="position: absolute; z-index: 4; display: block; ">
<img src="graphics/blank.gif" id="shirtModelIndexView1_19" name="undefined" title="undefined" style="position: absolute; z-index: 19; display: block; ">
<img src="graphics/blank.gif" id="shirtModelIndexView1_18" name="sewn in" title="sewn in" style="position: absolute; z-index: 18; display: block; ">
<img src="graphics/blank.gif" id="shirtModelIndexView1_20" name="undefined" title="undefined" style="position: absolute; z-index: 20; display: block; ">
<img src="graphics/view1/cuffs/left/1buttonangle/buttons/white1_view1_cuffs_left_1buttonangle_buttons.gif" id="shirtModelIndexView1_7" name="1buttonangle" title="shell shocked" style="position: absolute; z-index: 7; display: block; ">
<img src="graphics/view1/cuffs/left/1buttonangle/thread/white_view1_cuffs_left_1buttonangle_thread.gif" id="shirtModelIndexView1_8" name="1buttonangle" title="white" style="position: absolute; z-index: 8; display: block; ">
<img src="graphics/view1/placket/thread/white_view1_placket_thread.gif" id="shirtModelIndexView1_12" name="standard" title="white" style="position: absolute; z-index: 12; display: block; ">
<img src="graphics/view1/placket/buttons/white1_view1_placket_buttons.gif" id="shirtModelIndexView1_13" name="standard" title="shell shocked" style="position: absolute; z-index: 13; display: block; ">
<img src="graphics/view1/collar/classic/buttons/white1_view1_collar_classic_buttons.gif" id="shirtModelIndexView1_16" name="classic" title="shell shocked" style="position: absolute; z-index: 16; display: block; ">
<img src="graphics/view1/collar/classic/thread/white_view1_collar_classic_thread.gif" id="shirtModelIndexView1_17" name="classic" title="white" style="position: absolute; z-index: 17; display: block; "><img src="graphics/reference/prices/105.00.gif" id="shirtModelIndexView1_21" name="Design My Shirt" title="Design My Shirt" style="position: absolute; z-index: 21; display: block; ">
<img src="graphics/view1/cuffs/left/1buttonangle/innercuffs/c1_view1_cuffs_left_1buttonangle_innercuffs.gif" id="shirtModelIndexView1_6" name="1buttonangle" title="Cross Lines" style="position: absolute; z-index: 6; display: block; ">
<img src="graphics/view1/cuffs/left/1buttonangle/cuffs/c1_view1_cuffs_left_1buttonangle_cuffs.gif" id="shirtModelIndexView1_5" name="1buttonangle" title="Cross Lines" style="position: absolute; z-index: 5; display: block; ">
<img src="graphics/view1/innerback/c1_view1_innerback.gif" id="shirtModelIndexView1_1" name="standard" title="Cross Lines" style="position: absolute; z-index: 1; display: block; ">
<img src="graphics/view1/pocket/pocket/angle/c1_view1_pocket_pocket_angle.gif" id="shirtModelIndexView1_3" name="angle" title="Cross Lines" style="position: absolute; z-index: 3; display: block; ">
<img src="graphics/view1/cuffs/right/innercuffs/c1_view1_cuffs_right_innercuffs.gif" id="shirtModelIndexView1_10" name="1buttonangle" title="Cross Lines" style="position: absolute; z-index: 10; display: block; ">
<img src="graphics/view1/cuffs/right/cuffs/c1_view1_cuffs_right_cuffs.gif" id="shirtModelIndexView1_9" name="1buttonangle" title="Cross Lines" style="position: absolute; z-index: 9; display: block; ">
<img src="graphics/view1/sleeves/long/c1_view1_sleeves_long.gif" id="shirtModelIndexView1_2" name="long" title="Cross Lines" style="position: absolute; z-index: 2; display: block; ">
<img src="graphics/view1/base/tail/c1_view1_base_tail.gif" id="shirtModelIndexView1_0" name="tail" title="Cross Lines" style="position: absolute; z-index: 0; display: block; ">
<img src="graphics/view1/placket/placket/standard/c1_view1_placket_placket_standard.gif" id="shirtModelIndexView1_11" name="standard" title="Cross Lines" style="position: absolute; z-index: 11; display: block; ">
<img src="graphics/view1/collar/classic/collar/c1_view1_collar_classic_collar.gif" id="shirtModelIndexView1_14" name="classic" title="Cross Lines" style="position: absolute; z-index: 14; display: block; ">
<img src="graphics/view1/collar/classic/innercollar/c1_view1_collar_classic_innercollar.gif" id="shirtModelIndexView1_15" name="classic" title="Cross Lines" style="position: absolute; z-index: 15; display: block; ">
</div>