タブメニューの画像切り替えについて

質問

現在以下のサイトのソースでタブのjavascriptで設置しようとしているのですが
うまくいかないため、質問させていただきました。

http://www.ezgate-mt.sakura.ne.jp/jquery/71.html

ロールオーバーとアクティブの画像を別々にしたいため、
Javascriptのなかの
「// ロールオーバー 」以下の「_o」と書かれている部分を「_act」と
書き換えて「***_act.gif」という画像も用意しました。

ところが、たとえば番目のボタンをクリックすると画像名が
「nav-04_act_o.gif」になってしまい、画像が消えてしまいます。

ロールオーバーとアクティブの画像を別々にしたいとき
どのように設定すればいいのかご教授いただけないでしょうか？

ちなみにコンテンツの切り替えは使用せずボタンの箇所のみを
使用する予定です。

どうぞよろしくお願いします。

回答No.1

ORUKA1951

普通にCSSじゃまずいのですか？？
　⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )
にて、ブラウザの[表示]メニューから[スタイルシート]⇒「横並びプルダウン2」を選択した状態・・で、画像を置き換える形に変更すればよい。
　★Chromeは代替スタイルシートが利用できないため、他のブラウザで確認

補足

ORUKA1951さま

書き込みありがとうございます。

作成中のページ構成ですが、横並びの画像（今回タブにあたる部分）をクリックすると
ページ内のコンテンツが画像のtitle属性と同じ名前の別ファイルで用意したHTMLの内容に切り替わるというものです。
画像ボタンは毎週一枚ずつ追加になります。

その際ボタンにあたる画像には以下の動きをしてほしいのです。

【1】ページを開いたときに最新のボタンが「アクティブ画像」でその他の画像が「通常画像」の状態。
　　※この時点でページのコンテンツは自動的に最新のHTMLが読み込まれています。
【2】ボタンの上にマウスオーバーさせると「オーバー画像」にロールオーバーする。
【3】ボタンをクリックすると今まで「アクティブ画像」だったものが「通常画像」もどり、
　　クリックしたものが「アクティブ画像」になる。

現時点では、「アクティブ画像」と「オーバー画像」が同一画像のものなら完成しているのですが
この2つの画像をわけるとうまくいかないのです。。。

CSSでは難しいと思っているのですがどうでしょうか・・・？
ちなみに毎週画像を一枚ずつ追加していくので、
HTMLに画像を追加するだけで簡単に更新できるようにしています。
（CSSやjavascriptは画像追加時に触らなくていいように作っています。）