How to display avatar like images with layers on a webpage

I am trying to implement something like Yahoo Avatars where there is a fixed background image and then I arrange several items in the foreground creating an avatar.

What I am doing now is creating a lot of combination image patterns. Then assign every image pattern a binary number. On website I generate the binary number using some data and refer the image specific to the number. This does the job but takes a lot of space and the work b开发者_运维问答ecomes redundant if I have to change some image pattern. I can of course automate the Fireworks exporting slices process but I want to know if there is some better way I can implement this.

I can may be implement this using transparent PNGs, CSS z-index and absolute positioning but this will require a lot of tweaks to make it compatible across all browsers.

Is there some way this can be using SVG/Javascript or may be ActionScript/Flex or some other way? Can somebody suggest some options for this?

If you're not horribly worried about browser compatibility, I'd maybe look at using the HTML canvas element.

However, by your comment about tweaks, I assume that you are ;)

So, I'd either go with Flash, or PHP GD. Personally, I'd go with GD as you have all of your logic to assemble the image in a single php render page. No issues with cross-browser compatibility there or clients that don't have Flash installed (or browsers that don't have native Flash plugins ;)).

I agree with @Demian Brecht in that you should generate the images server-side, and just output to the browser a simple .png image.

However, that won't work too well if you want users to be able to drag things around inside the avatar, to customize the position of the dog, or the hat, or whatever else.

Here's a HTML/CSS solution using boring rectangles instead of cool images:

The idea is to make exact sized, transparent .png images of each item which could be placed.

You have available the top, left, width, height, z-index attributes - that's all you need to allow your users to precisely position; with the addition of a little jQuery magic.

Live Demo (doesn't contain any JS, yet)

CSS:

.avatarContainer {
    width: 153px;
    height: 226px;
    border: 1px solid #666;
    background: #ccc;
    position: relative
}
.avatarContainer div {
    position: absolute
}

HTML:

<div class="avatarContainer">
    <div style="top:20px; left:40px; width:40px; height:50px; background:red; z-index:3"></div>
    <div style="top:60px; left:40px; width:80px; height:60px; background:blue; z-index:2"></div>
    <div style="top:180px; left:10px; width:110px; height:20px; background:#000; z-index:1"></div>
</div>

I would use this just to allow users to drag stuff around and submit the placement to the server; then you can make the final images in PHP.