0

我正在寻找创建一个可定制的产品，您可以更改并查看网站上的视觉变化。我发现这很难解释，所以如果您立即知道这方面的教程，我深表歉意。我只是不知道如何真正解释这个想法。

http: //bit. ly/L8DfF2

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

只需看一眼源，它看起来显然是下拉列表，每个选项都连接到更改产品特定组件的图片。但是还有什么其他的吗？我习惯于将列出的或公告的选项连接到链接，我只是简单地将其连接到图片吗？只是不确定如何设置产品以显示您可以选择的更新选项是我最大的问题。

4

1 回答 1

0

嗯，它是基本图像，然后在它上面是一堆空图像。当您更改设置时，每个都有一些 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>
于 2012-07-24T00:40:23.960 回答