WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:onMouseOverイベントについて

0:[投稿] yuki [2006/06/27 14:55 ] [環境:IE6 わからない]

html Javascriptともに初心者です。質問に不備があるやも知れませんが、どうぞお手柔らかにお願いします。

現在作成しているHPでフレームを使用しているのですが、@のフレームにメニューボタン画像ををおき、
Aのフレームに内容を表示させると言う事をしています。
onMouseOver onMouseOutで画像を入れ替え、Aのフレームに内容を表示させることは出来たのですが、
例えば、Aフレームにa.htmが表示されている間はずっと、メニューボタンのほうはabutton2.gifが表示されているようにしたい。
つまり、onMouseOutでメニューボタンが元に戻るのではなく、他のメニューが選択されてはじめて元のボタンに戻る・・といったことをしたいのですが。

現在普通に、このようになっています。

<a href="a.htm" target="2"><img src="button/abutton1.gif" border="0" onMouseOver="this.src='button/abutton2.gif'" onMouseOut="this.src='button/abutton1.gif'"></a><br>
<br>
<a href="b.htm" target="2"><img src="button/bbutton1.gif" border="0" onMouseOver="this.src='button/bbutton2.gif'" onMouseOut="this.src='button/bbutton.gif'"></a><br>
<br>
<a href="c.htm" target="2"><img src="button/cbutton1.gif" border="0" onMouseOver="this.src='button/cbutton2.gif'" onMouseOut="this.src='button/cbutton1.gif'"></a><br>
<br>
<a href="d.htm" target="2"><img src="button/dbutton1.gif" border="0" onMouseOver="this.src='button/dbutton2.gif'" onMouseOut="this.src='button/dbutton1.gif'"></a><br>

なにか特別な難しいことをしなければ、そのようなことは無理なんでしょうか・・・。
稚拙な質問で申し訳御座いませんが、どなたかご教授願えませんでしょうか。


1:[回答] 燕雀 [2006/06/28 16:45 ]

a.htm 〜 d.html に javascript をつける.
以下は,メニュー項目の背景色を変える例:
(画像の場合もこれの応用で)

[フレームの定義]
<frameset cols="200,*">
 <frame src="test01.html" name="frame1">
 <frame src="test02.html" name="frame2">
</frameset>

[メニュー項目要素の定義(test01.html)]
<a href="test011.html" target="frame2" id="linkatag01id" style="display:block;margin-top:0.5em;background-color:lightgrey;">test011を表示</a>
<a href="test012.html" target="frame2" id="linkatag02id" style="display:block;margin-top:0.5em;background-color:lightgrey;">test012を表示 </a>

[メニュー項目の背景色を変更(例えば,test011.html)]
<script type="text/javascript">
function loadComplete() {
 var linktagobj= window.parent.frame1.document.getElementById("linkatag01id");
    linktagobj.style.backgroundColor= "yellow";
 var linktagobj= window.parent.frame1.document.getElementById("linkatag02id");
    linktagobj.style.backgroundColor= "lightgrey";
 }
</script>
<body onload="loadComplete();">


2:[保留] yuki [2006/07/05 15:21 ]

遅くなりましたが、燕雀さんご回答ありがとう御座います。
とりあえず教わったサンプルと同じものを作ってみる所からはじめようとと思いましたが、
「test001を表示」を選択すると背景色が黄色になるのですが、次に「test002を表示」を選択しても背景色が戻らない状態で止まっております。
明らかに自助努力が足りませんので、もう少し試行錯誤してみようと思います。
取り急ぎお礼まで。
どうも有り難う御座いました。


3:[関連] 燕雀 [2006/07/05 16:19 ]

大変失礼ながら,なにかのプログラミング経験はおありですか?
プログラムが期待通りの動作をしない場合,眼力だけで原因を追究しようとするのは至難のわざです.
JavaScript の場合は,alert()の挿入で調査していくのが一般的な手法の一つです.
例えば,

function loadComplete() {
alert("function loadComplete in");
var linktagobj= window.parent.frame1.document.getElementById("linkatag01id");
   linktagobj.style.backgroundColor= "yellow";
alert("function loadComplete 1");
var linktagobj= window.parent.frame1.document.getElementById("linkatag02id");
   linktagobj.style.backgroundColor= "lightgrey";
alert("function loadComplete out");
}

といれていくと,この関数の実行で3つのメッセージボックスが表示されるはずです.
"function loadComplete 1"までしか表示されないとなると,少なくともここまでは実行されていますから,

var linktagobj= window.parent.frame1.document.getElementById("linkatag02id");
alert(linktagobj);

としてみて,linktagobj が取得できているか様子を見ます.
ということを繰り返していって,問題の位置を絞り込んでいきます.
複雑なロジックになるとデバッガがないと大変ですが,シンプルなロジックなら,alert で問題の位置を絞り込んでいくだけで,かなりのことが解決できます.

回答(必須): 状態:

お名前(必須):

URL:




[戻る]