#23 Vanilla JSでカラーシミュレーターを作る【ぴよぴよコーダーの開発日記】

Vanilla JSって、フレームワークを使わない、いわゆる生JavaScriptのこと。説明するようなコードもそんなにないので、まずはデモ。

いらすとやさんから素材をお借りしました。ランドセルのトレースが微妙なのはすみません。

カラーシミュレーターとカラーパレット部分は、ラジオボタンで作ります。

<input type="radio" id="btn-A" style="display:none" checked="checked" onclick="imgChange1.src='r01.png'">
<label for="btn-A" title="ピンク" style="background:deeppink;">ピンク</label>
<input type="radio" id="btn-B" style="display:none" onclick="imgChange1.src='r02.png'">
<label for="btn-B" title="水色"style="background:skyblue;">水色</label>

ラジオボタンは非表示にしておいて、labelのforとidは合わせて、labelのほうにスタイルを書いてクリックできるようにしておきます。

ラジオボタンに書いた　onclick="imgChange1.src='r01.png'"　で、下記コードのname属性のsrcを書き換えるという仕組み。

<div><img src="r01.png" name="imgChange1" alt="ランドセル"></div>

画像を作成するときは、カラーが変更される場所を切り抜いた画像をベース画像として、同じサイズで、カラーが変更される場所のみの画像をカラーパレットの色数だけ作成します。ベース画像と、カラー変更する画像は、position:absoluteで重ねて表示して切り替えます。