ネットショップで、購入者ひとりひとりの注文に合わせた製品を 提供するユーザインタフェースの例を公開します。

ここでは例としてシューズのパーツの色を選択できるようにします。

各パーツを透過GIFで作成し、それらを重ねて表示することによって 全体像を表示します。さらに、マウスのクリックを受け付けるための 完全に透明なタッチスクリーンを一番上のレイヤに配置することにします。

部品が選択されたら色のメニューを表示し、タッチスクリーンは 表示しないようにします。

色が選択されたらメニューは消して、タッチスクリーンを表示します。

画像は、すべて同じキャンバスサイズでパーツ毎に色数だけ画像を作成します。 全ての画像が重なるように、imgタグのstyleで同じ絶対座標を指定します。 パーツの形状は多角形で表し、頂点の座標を配列に入れて保持します。 各パーツの画像は、styleでz-indexを使って重ね順を指定します。

多角形に重なりがある場合、たとえば四角の中にいくつか水玉がある ような場合、水玉のほうにより大きなz-index値を与えます。

タッチスクリーンはinputタグでtype='image'とし、一番上に表示されるように パーツより大きなz-indexを指定します。仮にそのname属性を'point'とすると、 point_x及びpoint_yにタッチスクリーンのクリックした座標が返ります。

この座標がどの多角形の中にあるかを調べることによって 対応するパーツを決定します。ここで使用しているのは、レイトレーシングの 手法です。点の座標から線を無限に伸ばして、多角形の辺と交差する回数が 奇数の場合、その点は多角形に含まれると考えられています。

多角形が重なっている場合は、上の（優先度の高い）多角形を先に調べるようにします。

ポップアップメニューは、divタグのstyleで絶対座標を指定して表示します。 この例では、タッチスクリーンのクリックされた座標を使います。

色はカラータイルの中から選択できるようにします。inputタグでtype='image' として、カラータイル毎にname属性の値を変え、どのタイルが選択されたか 調べます。

色が選択されたら、その色に対応するパーツの画像ファイル名を決めて、 表示します。

下のリンクからシューズのカスタマイズを行なうウェブページの例が見られます。