オンマウスでクリック後の画像を変化させたままにする方法

質問

たびたびお世話になります。
以前にも同じような質問をしたのですが・・
状況が変わり、それとHP作成を進めて行くうちに色々解って来た事もあるので、もう一度質問させて下さい。

フレームで、上／左／右に区切っています。
上と左のフレームにメニューがあり、右のフレームにメインコンテンツがあります。
上のメニューも左のメニューもtarget属性のリンクで右フレームに
表示させるようにしたいと思っています。
まだページを作っているところなのでリンクは飛ばしてないですが。
メニューは文字ではなく、上も左も画像を作ってボタンにしました。
JAVAではなく、HTMLで、オンマウスにより画像を変化させるようにもしてあります。
それを、リンクを張り、クリックした後もオンマウスで変化したままの画像にしたいのです。リンク先を表示している間だけ、です。
タグはこうなっています。
<img alt="" src="image/MENU1.jpg"
onmouseover="this.src='image/MENU1_1.jpg'"
onmouseout="this.src='image/MENU1.jpg'"
style="width: 119px; height: 33px;">

やり方はありますでしょうか？

それと、上のフレームからメニューをクリックした後、
左のフレームの中身も変化させる、というのはJAVAですか？
また、やり方はあるのでしょうか。
こんな風にやりたいのですが↓
http://www.dreampower-jp.com/index.html

回答No.2

koutarou504

ご提示のサイトのやり方で良いのなら、
単にそれぞれ別のメニューファイルを用意しているだけですし、まるごと変化させているのもウィンドウまるごと改めて表示しているだけ（target="_top"）です。

それを１つのファイルでとなると JavaScript による制御が必要となります。
（注意：オンマウスは単にイベントを拾っているだけであり、その中の処理は大抵が JavaScript であり、少なくともＨＴＭＬではありません。故に JavaScript 等が無効な場合はオンマウスのイベントも無効です。）

JavaScript の制御は結構面倒で、初期表示をクリックしただけならまぁなんとかなりますが、その後に別の項目をクリックされたら、今度はそのクリック分を変更したままとしながらも先に変更した項目は元に戻す必要があると。という事で this.src だけではどうにもなりません。となるとその先は閲覧環境も結構影響する制御なのであまりお勧めできませんが・・・。
とにかくいろいろなやり方がありますが、
オンクリックにてクリックされた処以外を初期化しクリックされた処を変更する。場合によってはそのオンクリックによってオンマウスアウトを制御するフラグを用意する必要があるかもしれませんが・・・。

なにより、それぞれのページ（フレーム）を用意する方が容易だと思いますが・・・。メニューでしょうからそんなに頻繁に変更されるページでもないでしょうし・・・って JavaScript は知識の方が大変ですが・・・。

回答No.1

asahina02

基本はこんな形
<a href=xxx.html><img src="a" onclick="change()"></a>
でクリック後にJavaScriptを使用してsrcを変更すればおｋではないかと。

> http://www.dreampower-jp.com/index.html
このサイトはフレームは使われていないようですね。
各ページで同じデザインを使用しているだけで、全て一つのページファイルになっています。