Possible to have part of product image change base on attribute chosen?

[ghurty]

Is this doable with zen-cart?

I have a product that can have different "colored foils". For example a jacket that has different colors foils.

I have many different jackets with different designs. Each one can come with different foils. The foil will be an attribute selected when looking at the product.

So is there a way that I can have the front image stay the same (it will have some transparent parts) but the background image (which will be the foil) change when the customer selects a different foil in the attribute list?

That way I dont need to manually create a different image for each potential variation.

Thanks

[stevesh]

Search the Free Software Add Ons (above) for 'attribute image'. It looks like there are a couple different approaches.

[ghurty]

Thank you, but it looks like those only change the entire image.

Which would mean that I have to make an image for every possible variation.


I am trying to change only part of the image (background or something).


Thanks

[rstevenson]

To (apparently) change part of an image, you either make multiple small images which are kept stuck together (always a source of problems) and then swap out the part you want to change; or you make one full image for each variation and swap it in/out as needed.

If I were me, I'd take the latter approach.

Rob

[ghurty]

The problem with the second approach is that I would have thousands of pictures needed to be made.


How would I go about the first way? It would not be that hard for my example, because It would be made up of only two pictures. A background (which would change based on the attribute chosen) and a foreground which is different for each product. The foreground will have certain spot that are transparent, so that you would see the background though them.

[rstevenson]

It shouldn't be too hard to code the background image into the place you want it using styles, and to put the foreground image where you want it when you want it. You may need to use product specific stylesheets, so review the readme file in the css folder.

But the real problem is alignment. How will you keep the images properly aligned in all browsers (4 buggy versions of IE to worry about!), in all the common OS versions, at all screen resolutions, etc. ?

Rob