How is this site layering images in flash / flex (and can this be done in regular html / css)

i recently asked this question and i got a lot of great answers breaking down the difference between flash and flex which was very informative and helpful. 开发者_JAVA技巧

One of my main parts of the question never got answered so i wanted to focus on that (as it was difficult to change to focus on the last questions once it got into a flash versus flex general debate)

In the first Site link on that question, as the use makes selections, these selections are getting applied to an image and you are building up a "master" image with all of the accessories chosen. This is similar to a lot of these "build a doll" websites i see but there is one main difference that goes to the heart of my question.

For example, on step 3, you choose a color and get something like this:

then on step 4, as you choose "accessories", the images changes to this:

or

or

Now this site is using flash (or flex, etc) and people have told me this could be replicated without flash 100% bysimply looking at using zindex with images and jquery / css but in the images above, it doesn't seem like these additional images are just being layered on top because in some cases the accessories is partially "behind" the original image (stars in the back of the cake, etc). So it seems like something more sophisticated is going on. I can't seem to find any examples on the web that show this capability in any tutorial or example)

I wanted to get feedback to if the follow capabilities where available just using regular css, floats, etc or there was some particular feature in flash / flex that i should be looking at to give this capabilities where you can "merge" images together to give you the affect in the images above.

Using z-index would do the trick if the image of the stars was a gif/png with only the stars. Made a small mockup to show you what I mean.

Otherwise you could make a CSS sprite with all states of the cake and just move the background-position of the image within the DIV.

I believe the most common way to handle this problem is simply to use a cutted image (cut the stars behind the cake) to give the impression stars are behind the cake, while in reality are upfront.

Another possibility is also to use the z-index and use 3 images:

1. the stars behind
2. the cake
3. the stars in front of the cake.

All dress games I've seen so far used the method of the "cutted image". Just try to do something using CSS. Once done, doing the javascript might not be too difficult.

What I think you need to do is break your images down into the following categories

1. The main cake image.
2. The accessories that go behind.
3. The accessories that go in front.

Now each image will need its own div. For instance, on the last one, the flowers that are behind need to be their own image, while the flowers in front need to be their own image.

Then just set the cake at z-index 2, the behind flowers at z-index 1, and the flowers in front at z-index 3. I recommend you use absolute positioning to position the flowers to the correct location. If you set the containing div that these images are in to position relative, the absolute positioning of the accessories will be relative to the top left corner of the containing div.

Below is some example html and css that might help.

<div id="cake-container">
   <div id="main-cake">
   </div>
   <div id="accessories-front"></div>
   <div id="accessories-back"></div>
</div>


#cake-container {
   position: relative;
}

#main-cake {
  z-index: 2;
}

#accessories-front {z-index: 3}
#accessories-back {z-index: 1}