I'm trying to figure out a good method for storing many permutations of product images that would represent the different options that are available.
For example, let's say we're customizing a car, we have option groups like:
Each of which could have many available selections.
What I would like to do is to be able to display a single image on the page that represents all of the customization options that the user selected. For example, display a red car, with chrome rims, tinted windows, body-colour trim and the coupe body style.
The trickiest part is that the number of options isn't consistent. Continuing with the car example, some cars may have more option groups than others, and there may be a different number of selections available in a group depending on the type of vehicle as well.
One specific restriction is that it has to work on an iPad via Safari, so Flash-based solutions are not an option.
What sorts of strategies are out there for managing all the possible permutations of products and options?
One possibility that did cross my mind was that I could use PNGs with transparency and then layer them in the browser. Each image would only contain the section need for that specific option and the rest would be transparent. This would make tracking the individual option images pretty easy as far as the database is concerned.
One downside to this would be that there would be a tremendous amount of work for the graphics team to generate all these images. However if this is the best option then that's what it would have to be.
My other concern is that I would need to be pretty precise with overlaying these images via CSS which I'm thinking will have some cross-browser implications. I'll also have to know which order to layer the images in so that they're all visible, but this is less of a concern.