画像を読み込むタグの基本は

<img src=”○○.jpg”>

です．

この””で囲まれた範囲はファイル名（パス名とファイル名）です．

これを条件（たとえば気温）によって変えればよいわけです．

気温

	春	夏	秋	冬
気温／季節	a	b	c	d
~0℃	0	0	0	0
0〜10℃	1	1	1	1
10〜20℃	2	2	2	2
20〜30℃	3	3	3	3
30℃〜	4	4	4	4

これで春の0度の時はa0.jpgを，秋の25度の時はc3.jpgと呼び出せばいいわけです．

色の要素をつけるならば，上着とパンツやスカートに色の番号をつけてみてはいかがでしょうか？

補色でコーディネートするならば，選んだ服の色相（Hue）に対して，補色の服を選びます．補色は角度で出せますので，180度反対の色を選べばいいでしょう．

今回は最初からファイル名に色相を入れておけばいいでしょう．後から服を追加して自動で色相をファイル名にすることもできるでしょう．例えば画像の中心50％の色を計測しファイル名にするなどです．

もし，赤いジャケット（0°）を選んだら，　色相が180°の服を選びます．

if(a==0){
b = 180;
}

でよろしいかと．

0°　90°　180°　270°の4パタンなので４つのifを書いてもよいでしょう．

動的に処理したいなら，

if(a>180;){
b = a-180;
}if(a<180){
b = a+180;
}

これでいいかな．

角度を変数b

季節は変数s（中身はb）

気温は15℃　変数c（中身は２）

var url = ‘”<img src=”‘ + b + s + c +’.jpg”>’;

でよろしいかと．

変数urlは <img src=”90b2.jpg”>とでるはずです．まだ未確認です．

このシングルクォーテーション’ ‘は””を固有名詞でなく文字そのものとして使いたいときに使います．

あとは20パタン×4角度で80枚の画像を用意すればいいわけです．