教えて下さい！リンクボタンの画像をオンマウスで変える方法

質問

今HPを縦フレームで左ページにメニュー、右ページにtarget指定でページが切り替わるようにしています。
左ページのメニューはgif画像のボタンなのですが、画像に触れると画像が変化し、画像からマウスを放すと元の画像に戻るようにしたいのです。

１．マウスで画像１に触れると画像２に変化（マウスを放すと画像２は１にもどる）
２．クリックした時に一瞬画像２がへこみ、離すと画像２に戻る。
３．当然同時に右ページも変わる。
４．右のページがくりっくしたメニュー画像のリンク先の間は画像２のまま変化しない。
５．そのほかのメニュー画像をクリックすると画像２は画像１にもどる。

というのはどうすればいいのでしょうか？
リンクボタンをへこませる方法はどこかで見たのですが、
それを今のhtmlのどこに書けばいいのかもわかりません。
ちなみに、外部のcssがあります。テンプレートを加工しているので。

宜しくお願いします！

回答No.1

partita · ベストアンサー

Javascriptを利用する方法もありますが、CSSの方法を紹介。

<a href="index.html" target="right">メニュー</a>

a {
display:block;←aタグをブロック要素にする
width:100px;←画像サイズ
height:20px;←画像サイズ
text-indext:-9999px;←「押す場所」というテキストを画面外へ
background:url(back1.gif);←ノーマル画像
}
a:hover {
background:url(back2.gif);←へこみ画像
}

これで 1、2、3はクリア（工夫すれば、リンクが何箇所にあろうが画像1枚ですみます）。

4、5なんですが、フレームを使用している意味がなくなりませんかねぇ。

補足

ありがとうございます。
4,5は考えているうちに私も必要ないかなと思えてきました・・・。
css・・・テンプレートを使って書き換えているのですが、
それについている外部cssに書き込めばいいということでしょうか？

いつもよくわからないのは、教えていただくソースをどこに書き込むのかということなんです・・・・。