根据多个值显示图像

Question

我正在尝试根据一组选项加载图片。假设用户选择蓝色的产品。图像将加载蓝色产品。然后，假设用户选择粗糙的完成。图像将加载显示具有粗糙表面的蓝色产品。我不希望所有产品组合都有一个下拉列表，因为这将是数百个。我宁愿它是每个产品变量（颜色，表面处理，尺寸等）的旋转木马或画廊，它们将它们的值组合在一起显示一个图像。

以前有没有人见过这样的事情，能指出我的解决方案吗？

编辑 - 这个网站实现我正在谈论的内容。 http://www.troveline.com/windowfilm_order.php4

Answer 1

我提供了一个基本示例，说明如何通过选择框和jquery在此处构建URL：http://jsfiddle.net/daybreaker/pdhzb/

唯一的缺点是你需要确保将默认选择的值设置为“none”，然后你需要为每个可能的选择框组合定义一个图像......如： / p>

blue-none-none.jpg
blue-rough-none.jpg
blue-smooth-none.jpg
blue-rough-small.jpg
blue-rough-large.jpg
blue-smooth-small.jpg
blue-smooth-large.jpg
blue-none-small.jpg
blue-none-large.jpg
red-none-none.jpg ...etc

另一种选择是拥有一个产品的数据库表，以及一个名为“options”的关联表，然后你的jQuery就可以提交一个ajax请求，将你的选择选项发送到一个页面，该页面执行查询以找到一个项目列出所有选项，然后返回其图像的HTML。

$.post('find_image.php',$("#form_name").serialize(),function(data){
    $('span#img').html(data); // If find_image.php return <img src="image.php">
});

Answer 2

我会使用单选按钮和带有巨大multidimensional array图片网址的javascript。不应该努力，只是很多工作。并使用大量的CSS。

Answer 3

不知道你使用的是哪种服务器端语言，但微软有一些东西可以整理出大量的图片：

http://www.microsoft.com/silverlight/pivotviewer/

查看互动演示以了解它是否符合您的需求。