着せ替え画像の表現方法

質問

いいアドバイスがあればご教授ください。

当方、C#、PHP、Javaにてプログラムを組むスキルは保有しております。
今回相談された案件なのですが、画像の表現方法に最適な方法があれば
ご教授ください。

目的、オーダーメード家具を作成する際、枠、ガラス、素材を選択すると
それに応じた画像が組み込まれ購入者にイメージさせる為のWebアプリ

例１ 車の見積もり時、色、ホイール、エアロなどクリックするとそれに応じて画像がはめ込まれる。
例2 アバターの着せ替えの様なイメージ

画像がはまる時、フェードイン、フェードアウトできれば最高ですが、これは
FlashのActionScriptしか無理なような気がしまして...←これは苦手です。

ではよろしくお願いいたします。

回答No.2

神崎 渉瑠（@taloo）

まず言語選択について。
一般的にウェブアプリケーションはJavaScriptで作られていますから、
CSS、JavaScriptを勉強するつもりが有るならCSS、JavaScriptで作れば最適だと思います。

勉強するつもりが無いなら、C#でSilverlight、JavaでJavaAppletで作れば良いと思います。

一般的なJavaScriptが最適と思うが勉強するつもりが無い、というのであれば、
依頼を断るもの選択肢の一つじゃないですかね。

画像の合成の仕方は、それぞれの実装方法に依ります。

------------------------
スポーツマンは野球もテニスもムエタイも、全部出来るわけではないですし、
通訳だからといって英語もドイツ語もヒンズー語も全部出来るわけじゃないです。
プログラマーだからといって、C#もJavaScriptも、全部出来るわけじゃないです。

回答No.1

tracer

要望されている程度の内容であれば、HTML/CSS/JavaScriptだけで実現できますよ。
どのブラウザ(バージョン)を対象にするかは、サイトを制作する前にまず決定すべきでしょう。IE6などのレガシーブラウザに対応させようとするならば、確かにFlashなどを使ったほうが楽かもしれませんが、IE9やこれから増えるIE10などのモダンブラウザを対象にするなら、CSS3もしくはJavascriptだけで実装できます。

たとえば、フェードイン効果を付ける場合、

CSS3なら
div{
opacity:0;
-webkit-transition: opacity 1s linear;
}
div:hover{
opacity:1
}

javascript(jQuery)なら
$("div").fadeIn();

とするだけです。
モダンブラウザを対象にするなら、基本的には簡単に実装できます。

検索キーワードは、「css3 transition animation」「jquery animate」あたりだと思います。