Dress-up
ラジオボタンで画像の着せ替え
ラジオボタンの切り替えイベントに対応して「着せ替え人形」のように画像を差し替えるサンプルです。jQuery以外のプラグイン等は不要です。
サンプル
HTML 付記
- HTMLは、画像を表示するための #stage と、ラジオボタンを並べた #selector で構成されています。
- このサンプルでは、すべてのパーツ画像を同一サイズの透明背景上に置いています。「着せ替え」は「福笑い」とは異なり、パーツの置かれる場所が決まっています。よって、この種のプログラムでは、すべてのパーツを同一サイズの透明背景の上に置くかたちで画像を用意するのが一般的です。選択されたパーツ画像を同一のポジションで背景に重ねるだけで「着せ替え」が可能になります。
- 画像は、imagesフォルダの中に、head01.png, head02.png・・という命名形式でまとめています。
- ラジオボタンの value = の部分に、画像ファイル名の head01, head02 を持たせることで、選択されたボタンの value から、挿入すべき画像のファイル名を取得できるようにしています。
JavaScript 付記
- nameグループごとに、change イベントが発生したら、選択されたボタンの value から画像のファイル名を取得し、#stage 上の画像の src を書き換える・・というシンプルな方法を採用しています。
- src に割り当てる画像のURLは、'images/' + （valueの値） + '.png' と記述することで（+で文字列が接続され）、"images/head01.png" となります。