Ecomm - Looking to Overlay Fabrics and Frames on Products

[ashmarie]

I'm trying to find the best approach to overlay all the different fabrics and frames on furniture. We only have one large silhouette image of each product in one frame finish and one fabric. We are trying to get our website to display a different frame and fabric once that option is clicked on the website. We don't have the resources to take a photo of each option for the furniture, that would be over 200 varieties for each product! We found many websites that have this and we are trying to figure out if it is a software or a custom javascript. Basically if it is a custom javascript then how do we go about finding the right web developer that can accomplish this. Any resource and advice is GREATLY APPRECIATED! Thanks

Examples of what we are trying to accomplish:
http://www.polywoodinc.com/polywood-...dirondack.html
http://www.case-mate.com/iPhone-4-Ca...Tank-Cases.asp

[VIPStephan]

This is not possible with JavaScript and it’s not JS that is doing that in the examples you posted, either. These are different images, indeed, and if they haven’t been created with a photo editor in advance, they are at least being created/manipulated dynamically with a server side script (which the image URLs also suggest if you view the single images in the browser).

For example, the URL of the images at polywoodinc.com look like this:

• http://www.polywoodinc.com/media/catalog/product/cache/1/image/400x/9df78eab33525d08d6e5fb8d27136e95/A/D/AD5030WH_1.jpg
• http://www.polywoodinc.com/media/catalog/product/cache/1/image/400x/9df78eab33525d08d6e5fb8d27136e95/A/D/AD5030GR.jpg
• http://www.polywoodinc.com/media/catalog/product/cache/1/image/400x/9df78eab33525d08d6e5fb8d27136e95/A/D/AD5030MA.jpg

It’s even more obvious on the other site:

• http://www.case-mate.com/getDynamicImage.aspx?path=Blacktank1.jpg&w=480&h=480&q=100
• http://www.case-mate.com/getDynamicImage.aspx?path=iph4s-TANK-navyAUQA2.jpg&w=480&h=480&q=100
• http://www.case-mate.com/getDynamicImage.aspx?path=getDynamicImage-4.jpg&w=480&h=480&q=100

These URL query strings show that they actually seem to be multiple separate images that have been created beforehand, and the script is resizing them dynamically. But with an image manipulation library like GD or ImageMagick you might be able to manipulate blank canvas images on the fly, too.

[hdewantara]

It is harder to imagine what kind of furniture product you have which varies on fabrics and frames. Have an URL/ link to the existing site for sharing?

If your site allows (absolute) stacking of overlays/ layers then layer-stacking might be a solution in XHTML/CSS/JS. Also, the images used should be in transparent .PNG format. The downside is that the resultant image shown couldn't be saved, or processed further as regular image; it is (they are) actually layers.

Some said it is possible using canvas techniques of HTML5, but I'm not familiar with that. The other "natural way" (images for an image) to go would be with what VIPStephan has suggested.