0

サイトの視覚的な変化を変更して確認できる、カスタマイズ可能な製品を作成したいと考えています。これを説明するのは難しいと思うので、これに関するチュートリアルをすぐに知っていれば申し訳ありません。私はこの考えを本当に説明する方法を失っています。

http: //bit. ly/L8DfF2

彼らが販売する製品、カスタム xbox 360 コントローラーを表示するページで、誰かがこのアイデアでカスタム製品ページを作成する方法を直接教えてくれます。

ソースをちらりと見るだけで、製品の特定のコンポーネントを変更する画像に各オプションが接続されたドロップダウン リストのように見えます。しかし、他に何かありますか？リストされた、または箇条書きのオプションをリンクに接続することに慣れていますが、単に画像に接続するだけですか? 選択できる更新されたオプションを表示するように製品をセットアップする方法がわからないというのが、私の最大の疑問です。

4

1 に答える 1

0

それが基本イメージで、その上に空のイメージのスタックがあります。設定を変更すると、それぞれにいくつかの onChange リスナーがあり、srcこれらの空の画像の 1 つまたは 1 つが変更され、スタックされた画像全体が変更されます。

コンセプトのサンプルコードを次に示します...実装では、各選択により異なる画像が調整されます（製品の関連部分のみを表します）：

<!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 に答える