Question

我希望创建一个可自定义的产品，您可以更改并查看网站上的可视化更改。我发现这很难解释，所以如果你立即知道这方面的教程我会道歉。我只是不知道如何真正解释这个想法。

http: //bit. ly/L8DfF2

在页面上显示他们销售的产品，一个自定义的xbox 360控制器，有人可以直接指出我如何使用这个想法创建自定义产品页面。

只是看一眼来源，看起来很明显是下拉列表，每个选项都连接到一张改变产品某个组成部分的图片。但还有什么更重要的吗？我用来将列出的或公告的选项连接到链接，我只是简单地将它连接到图片？只是不确定如何设置产品来显示您可以选择的更新选项是我最大的问题。

Answer 1

嗯，这是基本图像，然后在它上面是一堆空图像。当您更改设置时，每个都有一些onChange侦听器，它会更改src或其中一个空图像...从而更改整体堆叠图像。

以下是概念的一些示例代码...在您的实现中，每个选择都会调整不同的图像（仅代表产品的相关部分）：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#shell {width:100px;height:100px;display:block; background-color:#f00;}
#button {width:50px;height:50px;display:block; background-color:#00f;}
</style>
</head>
<body>
<div id="shell"><div id="button"></div></div>
Shell:
<select onChange="col('shell',this.value)">
<!-- in your version the values below would be file names of images -->
<option value="#f00">Red</option>
<option value="#0f0">Green</option>
<option value="#00f">Blue</option>
</select><br/>
Button:
<select onChange="col('button', this.value)">
<!-- in your version the values below would be file names of images -->
<option value="#00f">Blue</option>
<option value="#f00">Red</option>
<option value="#0f0">Green</option>
</select>

<script>
function col(part,x){
    document.getElementById(part).style.backgroundColor=x;
    //in yours, it would be document.getElementById(part).src=x;
}
</script>
</body>
</html>

用于自定义产品的HTML

1 个答案: