javascriptによる着せ替え実装【第02回】


javascriptによる着せ替え実装

制作の小林です。

最近はコートを着ていると汗ばんだり、かと思ったら急に寒くなったりで季節の変わり目を感じますね。
そういえば週末に数年ぶりの桜餅を食べました。
桜餅といっても餅の部分がスポンジ?だったので不思議な感じでした。
もちもちとしたお餅の触感は味わえませんがのどに詰まったり銀歯が取れないのは安心ですね、味も申し分なかったです。

さて、今回は前回の着せ替えをバージョンアップさせて色も変更できるようにしていきたいと思います。

差分絵の用意

前回用意した服に色のバリエーションを増やします。
服のファイル名を下記のように変更、何も来ていない時様に透明なPNG画像も用意しておく。

差分イラストの用意

先に完成系のコードを見てみましょう。

[html]
<style type="text/css">
#dress {
position:relative;
height: 500px;
}
#dress img {
position:absolute;
left:0;
top:0;
}
</style>
<div id="dress"> <img src="images/body.gif"> <img src="images/none.png" name="innerLink"> </div>
<div id="inner_message">インナーを選択</div>
<div id="innerColor_message">色を選択</div>
<p>■インナーを選択してください。</p>
<p> □インナー<br>
<input type="radio" name="inner" onClick="innerChange();" checked />
なし
<input type="radio" name="inner" onClick="innerChange();" />
タンクトップ
<input type="radio" name="inner" onClick="innerChange();" />
Yシャツ
<input type="radio" name="inner" onClick="innerChange();" />
七分丈 </p>
<!– 表示非表示切り替え –>
<div id="innerColorBox01" style="display:none;">
<p class="btn">
<input type="radio" name="innerColor_a" onClick="innerColor_a01()" value="画像1" checked >

<input type="radio" name="innerColor_a" onClick="innerColor_a02()" value="画像2">

<input type="radio" name="innerColor_a" onClick="innerColor_a03()" value="画像3">

<input type="radio" name="innerColor_a" onClick="innerColor_a04()" value="画像3">
青 </p>
</div>
<div id="innerColorBox02" style="display:none;">
<p class="btn">
<input type="radio" name="innerColor_b" onClick="innerColor_b01()" value="画像1" checked >

<input type="radio" name="innerColor_b" onClick="innerColor_b02()" value="画像2">

<input type="radio" name="innerColor_b" onClick="innerColor_b03()" value="画像3">

<input type="radio" name="innerColor_b" onClick="innerColor_b04()" value="画像3">
青 </p>
</div>
<div id="innerColorBox03" style="display:none;">
<p class="btn">
<input type="radio" name="innerColor_c" onClick="innerColor_c01()" value="画像1" checked >

<input type="radio" name="innerColor_c" onClick="innerColor_c02()" value="画像2">

<input type="radio" name="innerColor_c" onClick="innerColor_c03()" value="画像3">

<input type="radio" name="innerColor_c" onClick="innerColor_c04()" value="画像3">
青 </p>
</div>

[/html]
[js]
<script type="text/javascript">
//服の種類選択——————————————————————————————————
function innerChange(){
radio = document.getElementsByName(‘inner’)
//服なし
if(radio[0].checked) {
document.getElementById(‘innerColorBox01’).style.display = "none";
document.getElementById(‘innerColorBox02’).style.display = "none";
document.getElementById(‘innerColorBox03’).style.display = "none";
document.getElementById("inner_message").innerHTML = "インナーを選択";
document.getElementById("innerColor_message").innerHTML = "色を選択";
document.innerLink.src = "images/none.png";
}
//タンクトップ
else if(radio[1].checked) {
document.getElementById(‘innerColorBox01’).style.display = "block"; //タンクトップの色を表示
document.getElementById(‘innerColorBox02’).style.display = "none"; //Yシャツの色を非表示
document.getElementById(‘innerColorBox03’).style.display = "none"; //七分丈の色を非表示
document.getElementById("inner_message").innerHTML = "タンクトップです。"; //服の種類の説明文変更
document.getElementById("innerColor_message").innerHTML = "白です。"; //服の色の説明文変更
document.innerLink.src = "images/inner_a01.png"; //画像変更
document.getElementsByName("innerColor_a")[0].checked = true; //色のラジオボタンの初期値設定
}
//Yシャツ
else if(radio[2].checked) {
document.getElementById(‘innerColorBox01’).style.display = "none";
document.getElementById(‘innerColorBox02’).style.display = "block";
document.getElementById(‘innerColorBox03’).style.display = "none";
document.getElementById("inner_message").innerHTML = "Yシャツです。";
document.getElementById("innerColor_message").innerHTML = "白です。";
document.innerLink.src = "images/inner_b01.png";
document.getElementsByName("innerColor_b")[0].checked = true;
}
//七分丈
else if(radio[3].checked) {
document.getElementById(‘innerColorBox01’).style.display = "none";
document.getElementById(‘innerColorBox02’).style.display = "none";
document.getElementById(‘innerColorBox03’).style.display = "block";
document.getElementById("inner_message").innerHTML = "七分丈です。";
document.getElementById("innerColor_message").innerHTML = "白です。";
document.innerLink.src = "images/inner_c01.png";
document.getElementsByName("innerColor_c")[0].checked = true;
}
}

//服の色選択——————————————————————————————————
//タンクトップ
function innerColor_a01(){
document.innerLink.src = "images/inner_a01.png";
document.getElementById("innerColor_message").innerHTML = "白です。";
}
function innerColor_a02(){
document.innerLink.src = "images/inner_a02.png";
document.getElementById("innerColor_message").innerHTML = "赤です。";
}
function innerColor_a03(){
document.innerLink.src = "images/inner_a03.png";
document.getElementById("innerColor_message").innerHTML = "緑です。";
}
function innerColor_a04(){
document.innerLink.src = "images/inner_a04.png";
document.getElementById("innerColor_message").innerHTML = "青です。";
}
//Yシャツ
function innerColor_b01(){
document.innerLink.src = "images/inner_b01.png";
document.getElementById("innerColor_message").innerHTML = "白です。";
}
function innerColor_b02(){
document.innerLink.src = "images/inner_b02.png";
document.getElementById("innerColor_message").innerHTML = "赤です。";
}
function innerColor_b03(){
document.innerLink.src = "images/inner_b03.png";
document.getElementById("innerColor_message").innerHTML = "緑です。";
}
function innerColor_b04(){
document.innerLink.src = "images/inner_b04.png";
document.getElementById("innerColor_message").innerHTML = "青です。";
}
//七分丈
function innerColor_c01(){
document.innerLink.src = "images/inner_c01.png";
document.getElementById("innerColor_message").innerHTML = "白です。";
}
function innerColor_c02(){
document.innerLink.src = "images/inner_c02.png";
document.getElementById("innerColor_message").innerHTML = "赤です。";
}
function innerColor_c03(){
document.innerLink.src = "images/inner_c03.png";
document.getElementById("innerColor_message").innerHTML = "緑です。";
}
function innerColor_c04(){
document.innerLink.src = "images/inner_c04.png";
document.getElementById("innerColor_message").innerHTML = "青です。";
}
</script>
[/js]

デモ1はこちら

「innerChange」で服の種類を変えて、同時に選ばれた服の色のラジオボタンが出てくるという仕組みを3種類用意しました。インナーがなしの場合は透明画像の呼び出して色のラジオボタンはすべて非表示にしています。

印刷用に整えよう

せっかくお気に入りのコーディネイトができたので印刷してみましょう。
ただここでボタンなどは邪魔なのでCSSを使って印刷時に不必要なボタンなどを非表示にします。

[html]
<style type="text/css" media="print">
.print {
display: none;
}
</style>
<div class="print">
ここに印刷時に消したい内容を囲む
</div>
<!–印刷ボタン–>
<p><input type="button" value="この結果を印刷する" onClick="window.print();" /></p>
[/html]

デモ2はこちら

このコードを組み合わせていくとアウター、ボトム、アクセサリーなど、好きな組み合わせができるのでさらにいろいろできそうですね。

それではお疲れ様でした。


PAGE TOP

CONTACT

サービスについてのご相談やご質問など、
お気軽にお問い合わせ下さい。