質問をお願いします。

現在添付画像のような、サイトを制作しています。

下に並んでいるカラーのアイコンをクリックすると、上のハガキの画像と色コードのゴールドの文字が変わります。

多分eachを使うのかなというのはなんとなくわかるのですが、
今のソースだと、どちらかクリックすると、ファイル名と画像が両方変わってしまいます。

JSのソースが悪いのはわかるのですが、どこをどのように修正すると、個々に動かせるか、どなたがご教授頂けると嬉しいです。

よろしくお願いします。



$(function (){
//ファイル名を取得する
var cmArray = [];

for(i=0;i<$('.color-tab a').length;i++){
cmArray.push($('.color-tab a').eq(i).attr('title'))
}
$(".color-tab a").click(
function(){
var cmTxt = cmArray[$(".color-tab a").index(this)];
$(".file-name").text(cmTxt);
}
);

//カラーの上にマウスを乗せると白枠が付く
$('.color-tab img').hover(function(){
$(this).attr('src', $(this).attr('src').replace('_off', '_on'));
},function(){
$(this).attr('src', $(this).attr('src').replace('_on', '_off'));
});

//カラーをクリックすると画像が変わる
$(".color-tab a").click(function(){
$(".picture_area img").attr("src",$(this).attr("href"));
return false;
});
});