イメージをHTMLでカスタマイズする

Question

カスタマイズシューズを購入できるウェブサイトを作る必要があります。 機能の1つは、靴のペアを含むページが表示されている場合、靴を履くための「ステッカー」とそれらのステッカーの色を と選択できます。 これらは、靴の横のパネルから選択できます。

私は私の考え 、これを行う方法についての方法を考えていた：私は、（ ステッカーを表す）二つの小さなIMGタグを配置画像 上 表示靴のペアの画像、ユーザーはある種のステッカーをクリックする。imgタグ にそのステッカーを記入する。ユーザーが色を選択すると、img-tag の画像を、選択した色のステッカー画像に置き換えます。

しかし、これは絶対位置（応答しない？）と画像の組み合わせ （すべてのステッカーはすべての色を有する）の多くを必要とするでしょう...

だから、何がそれを行うための最善の方法だろうか？ これには一種のプラグインがあるとは思いませんか？

Answer 1

パーセンテージやvh/vwを使用して絶対位置を反応させることができます。キャンバスを使用して靴とステッカーを1つのタグに表示することもできます。

ステッカーを着色するために、SVGを使用することが可能です。あなたは他のアップロードなしでSVGの色の幅のJavaScriptを変更することができます。しかし、複雑な画像ではそれほど有用ではありません。