二重の画像切り替え
以下のようなJavaScriptを作りたいと考えております。
非常にレベルの低い内容で申し訳ないのですが、どうかみなさんの知恵を貸していただけば幸いです。
（ちなみにJavaScriptで処理品ければいけない成約がありますので、他の方法は今回はすみません。）
見せるのも恥ずかしいレベルのソースですが、ソースも載せます。
ＣのいずれかをクリックするとＢの３つのサムネイル画像がすべて切替り、
更にＢのいずれかをクリックすると拡大画像のＡが切替るJavaScriptを作りたいと考えております。
┌──┐
│拡大│←Ａ（Ｂの拡大画像）
└──┘
┌─┐┌─┐┌─┐
│前││横││後│←Ｂ（車の各方向からの写真画像）
└─┘└─┘└─┘
┌─┐┌─┐┌─┐
│赤││青││黒│←Ｃ（車のカラーバリエーション）
└─┘└─┘└─┘
◆◆◆現在のソース◆◆◆
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js"></script>
<!--Ａ（Ｂの拡大画像）-->
<div id="main_img"><img id="target_main" src="images/red_head.jpg" width="450" height="190" alt="image"></div>
<!--Ｂ（車の各方向からの写真画像）-->
<div class="thumbnail">
<ul>
<li><a href="images/red_head.jpg"><img id="target_thumbnail_01" src="images/red_head.jpg" width="100" height="41" alt="gold_01"></a></li>
<li><a href="images/red_side.jpg"><img id="target_thumbnail_02" src="images/red_side.jpg" width="100" height="41" alt="gold_02"></a></li>
<li><a href="images/red_back.jpg"><img id="target_thumbnail_03" src="images/red_back.jpg" width="100" height="41" alt="gold_03"></a></li>
</ul>
</div>
<!--Ｃ（車の各方向からの写真画像）-->
<div class="color">
<ul>
<li><a href="○○○"><img src="images/wheat.jpg" width="78" height="26" alt="sample01"></a></li>
<li><a href="○○○"><img src="images/images/java.jpg" width="78" height="26" alt="sample01"></a></li>
<li><a href="○○○"><img src="images/images/graphite.jpg" width="78" height="26" alt="sample01"></a></li>
</ul>
</div>
<!--メインイメージ切り替えスクリプト-->
<script type="text/javascript">
$(document).ready( function() {
$(".thumbnail a").click( function() {
var changeSrc = $(this).attr("href");
$("#target_main").fadeOut("slow",
function() {
$(this).attr("src", changeSrc);
$(this).fadeIn();
}
);
return false;
});
});
</script>
<!--カラー切り替えスクリプト-->
・
・
・
