0

I'm working on web-based "product visualizer" software that will provide the user with a product graphic, allowing them to select different regions, which are of arbitrary sizes and shapes, of the graphic and choose from various available colors and patterns.

I intend to make this dynamic and scalable. I would like to be able to stay with as few graphics files as possible, using only a base image (photo or illustration of the product) and various texture images and colors to use as fills/backgrounds.

Ideally, when the client wants to add additional products and options, we only need to render an additional base image and possibly other textures. Otherwise, we'll need to manually generate graphics for every combination of available regions and textures... you can obviously see how that would become arduous and redundant.

I've found numerous jQuery plugins and experimented with Image Mapster, but none appear to be able to:

  • set different background images for different regions/areas
  • retain those backgrounds statically

Is this even possible (without Flash) or will I need to resort to positioning, aligning and layering manually-generated graphics for all available combinations?

Recovering Nerdaholic
  • 687
  • 1
  • 7
  • 23

1 Answers1

0

Use a combination of html and css to divide your area into base regions and set your background image to whatever you want.

Use div's to make regions for each base product. Use background-image to set background for the big div

If you implement this correctly, you should be able to have "modules" for each product having its own div, which should arrange itself nicely if you use the correct positioning (something like "float:left")

Benjamin Linn
  • 16
  • 3