SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Advise on creating a rendering feature.

    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.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    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:

    Code html4strict:
    <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>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •