javascriptによる画像切り替えについて2
javascriptによる画像切り替えについて2
先日に引き続きjavascriptによる画像切り替えについての質問です。
http://okwave.jp/qa/q5622789.html
添付画像のように、サイドバーにボタン数個、大きな画像（#main_img)とあって、ボタンにオンマウスで#main_imgが切り替わり、ボタンをクリックするとリンク先に移動できるようにしたいと考えました。
fujillinさんのアドバイスと
http://www.ziyotoy.net/lab/multi_rollover/#
を参考に以下のようなソースである程度やりたかったことができたのですが、若干の変更をしたいものの初心者のためどうすればよいかわかりません。
ご助言いただけないでしょうか？
現行のソース
◆外部js
http://www.ziyotoy.net/lab/multi_rollover/#
に掲載されています（長くてこのスペースに書ききれないので…）
◆header内js
<script type="text/javascript">
//切り替え対象を指定（id）
var mr = new MultiRollover("main_img");
//ロールオーバー対象を指定（id）
mr.addTarget("navi");
//切り替え画像を指定（画像へのパス）
mr.addSource("./img/main_img_02.jpg",
"./img/main_img_03.jpg",
"./img/main_img_04.jpg",
"./img/main_img_05.jpg",
"./img/main_img_06.jpg");
mr.observe(window, "load", mr, mr.create);
</script>
◆html
<img src="img/main_img_01.jpg" alt="メインイメージ" id="main_img" />
<ul id="navi">
<li><a href="../aboutus/index.html" id="thumb2"><img src="../img/menu_02.jpg" alt="ボタン1" /></a></li>
<li><a href="../aboutus/index.html#where" id="thumb3"><img src="../img/menu_03.jpg" alt="ボタン2" /></a></li>
<li><a href="../staff/index.html" id="thumb4"><img src="../img/menu_04.jpg" alt="ボタン3" /></a></li>
<li><a href="../menu/index.html" id="thumb5"><img src="../img/menu_05.jpg" alt="ボタン4" /></a></li>
<li><a href="../event/index.html" id="thumb6"><img src="../img/menu_06.jpg" alt="ボタン5" /></a></li>
</ul>
この状態でボタンにロールオーバーでid="main_img"の画像を切り替えることができるようになりましたが、ロールアウトしたときに最初のmain_img_01.jpgに戻したいのにmain_img_02.jpgになってしまいます。
ロールアウトしたらmain_img_01.jpgに戻るようにするにはどこを変更したらよいのでしょうか？
http://www.ziyotoy.net/lab/multi_rollover/#
の管理者様に質問できればと思ったのですが、ブログのコメント等も受け付けていらっしゃらないようなので、ここで質問させていただきます。
どなたかご助言をお願いいたします。
お礼
やりたかったことが実現出来ました。すごく嬉しいです。本当にありがとうございましたm(_ _)m