Jquery adding and removing multiple Image layers on div

Question

I have a problem of finding the right function , or logic to resolve this problem for adding layers to a div (transperant png).

This is a part of a "configurator" for potential products.

semi-working demo (shirt example) can be find here :

http://jsfiddle.net/obmerk99/9t4f4/16/

If I will use append() - like you can see it commented out in the code - it will append endlessly - how can i remove the previous option (from the same option group only)

1 - What is the right function to use here ?

2 - How can I make the "groups" division without resort into multiple dedicated divs (i will have 50-60 options..) - or in another scenario, how to create those automatically ?

3 - How to make it work for radio / checkboxes ??

EDIT I

Lame´s word explanation :

I have "groups" of options, all referring to the same product. Each group "option" corresponds to a transparent png with the option´s image or respective part.

Foe example, if i configure a car, I will have a group of "wheels" options with images of different wheels, a Group of "windows" options with different windows , a Group of "color" options etc. etc... In the end , they stack up and make the complete image - configured. It is a bit like those sites making avatars, or cartoonish images where one can choose head, muctache, background, glassess, hair etc.

Answer 1

Maybe you can have a main image showing what never changes, on top of that have an image for each option, the images could be in the markup or added when the option is first selected.

Here is a mod to the fiddle, I think its what you're trying to achieve fiddle I added an overlay image and span for each option.

EDIT: Automating the switch would be trivial, just give the display and information elements ids ending in the element that affects it
Eg

<select id="optionX"> <img id="img-optionX"> <span id="desc-optionX">

see fiddle

I think you should use radio buttons(if you don't want to use the select) instead of the check boxes because they can be grouped easily.

see fiddle

Answer 2

I've had to do this before while generating an avatar image with data pulled from an MMO game site. I used PHP and the GD library to generate an image on the fly with all of the necessary pieces (including different variations of color) and then cached the generated image so that subsequent calls for that same configuration would not have to be regenerated. Eventually every possible configuration of the avatar was cached and the image generating script became obsolete.

Maybe you could use this same technique or simply generate every possible image up front allowing Jquery to pick and choose based on selected options? The only other option I can think of would be to use Flash or HTML 5's canvas element.

Answer 3

尝试以下代码为您评论的JS代码

$('#prod').empty().append('<img id="prod-image" style="z-index:1;" src="http://img8.uploadhouse.com/fileuploads/16068/1606810537372e83db57b46d5a2d44d3124ac999.png"/>').append('<span id="collar"><img style="z-index:2;" src="'+data[value].img+'"/>Control Text : </span>');