为区域构建具有可选择和不同背景（颜色和图像填充）的复杂图像映射

Question

我正在开发基于网络的“产品可视化”软件，该软件将为用户提供产品图形，允许他们选择不同的区域，具有任意大小和形状图形，并从各种可用的颜色和图案中选择。

我打算让这种动态和可扩展。我希望能够使用尽可能少的图形文件，只使用基本图像（产品的照片或插图）和各种纹理图像和颜色作为填充/背景。

理想情况下，当客户想要添加其他产品和选项时，我们只需要渲染一个额外的基本图像和可能的其他纹理。否则，我们需要为可用区域和纹理的每个组合手动生成图形......你可以清楚地看到它将变得多么艰巨和冗余。

我发现了许多jQuery插件，并使用Image Mapster进行了实验，但似乎没有一个能够：

• 为不同的地区/区域设置不同的背景图像
• 静态保留这些背景

这是否可行（没有Flash）或我是否需要为所有可用组合定位，对齐和分层手动生成的图形？

Answer 1

使用html和css的组合将您的区域划分为基本区域，并将背景图像设置为您想要的任何内容。

使用div为每个基本产品制作区域。 使用背景图像为大div设置背景

如果你正确地实现了这个，那么你应该能够为每个拥有自己的div的产品提供“模块”，如果你使用正确的定位（例如“float：left”），它应该很好地排列。