ベストアンサー

文字のマウスオーバーで、別フレームへ画像を表示させたいのですが

2003/06/15 13:41

ただいまHPビルダーにてHPを作成しています。上下にフレームを分けており、上:地図下:地名として・・・下フレームの地名(リンクを挿入してます)をマウスオーバーすれば、上フレームの地図に場所を矢印で示すというような効果ができないものかと考えてます。これが同じページ内であれば、 HPビルダーの、ロールオーバー効果にて作成することも可能なのですが、下フレームの地名がたくさんあってスクロールする必要があるため、常に地図を表示させるように地図と地名を別フレームに分けたいのです。アドバイスよろしくお願いいたします<(_ _)>

spnk55
お礼率87% (69/79)

JavaScript
回答数3
ありがとう数2

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

noname#199778

2003/06/17 19:09 回答No.3

補足見ました。下の地名を表示するフレーム内のHTMLを、以下のようにしてみてください。 <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> <script type="text/javascript"></script> </head> <body> <CENTER> <TABLE border="1"> <TBODY> <TR> <TD><a href="#" onMouseover="point('aaa','visible')" onMouseout="point('aaa','hidden')" onClick="return false;">aaa</a></TD> </TR> <TR> <TD><a href="#" onMouseover="point('bbb','visible')" onMouseout="point('bbb','hidden')" onClick="return false;">bbb</a></TD> </TR> <TR> <TD><a href="#" onMouseover="point('ccc','visible')" onMouseout="point('ccc','hidden')" onClick="return false;">ccc</a></TD> </TR> </TBODY> </TABLE> </CENTER> </body> </html> 地名のフレーム側のHTMLを以上のソースにすれば、補足でお伝えいただいている目的の動作は得られると思います。スクリプト中にもコメント文で記入しましたが、「parent.***.document.～～」の***の部分には、フレームセットをするHTMLに記載されている、上のフレームの名前を入れてください。一応、Netscape6とIE6で動作確認してあります。 Netscape4.xxでは動作しませんが、少し改造すれば適用可能と思います(手元にNetscape4.xxがなくて、動作確認が取れないので、ここでは割愛します)。ただ、補足にあるソースでは、地図の側の矢印の画像を、スタイルシートの絶対配置で指定しているので、若干のズレが出る可能性は残るかも知れません。その場合は、地図の側のHTMLのソースを検討して、矢印の画像の配置の仕方を工夫してみてください。これでおそらくは上手くいくと思いますが…

質問者

お礼 2003/06/18 14:50

素晴らしい! あちこちHPを検索して試してみてもできなかったことがようやくできました。これでHP作成も次の段階へ進むことができます。手間がかかるところ、丁寧にありがとうございました。そして自分ももっと勉強して JavaScriptが少しは理解できるようになりたいです。

その他の回答 (2)

noname#199778

2003/06/17 12:33 回答No.2

画像のロールオーバーも、レイアウト枠の表示・非表示の切り替えについても、別フレームからの操作は可能だと思います。もしよろしければ、開示したくないファイル名やページ内容などは伏せていただいてかまいませんので、スクリプトを含むHTMLソースを補足していただけませんでしょうか。ソースを見れば、解決できると思います。

質問者

補足 2003/06/17 15:28

いろいろお手間を掛けさせてしまいすみません。さて、HTMLソースですが、まだ具体的に作成してませんので(汗このようにしたいという簡単なサンプルを作って、それをソース表示しました。上:地図のフレーム <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> </HEAD> <BODY> <DIV style="width : 27px;height : 20px;top : 53px;left : 295px; position : absolute; z-index : 3; visibility : hidden; " id="aaa"><IMG src="yajirusi.jpg" width="25" height="19" border="0"></DIV> <DIV style="width : 26px;height : 21px;top : 155px;left : 390px; position : absolute; z-index : 2; visibility : hidden; " id="bbb"><IMG src="yajirusi.jpg" width="25" height="19" border="0"></DIV> <DIV style="width : 26px;height : 21px;top : 54px;left : 492px; position : absolute; z-index : 1; visibility : hidden; " id="ccc"><IMG src="yajirusi.jpg" width="25" height="19" border="0"></DIV> <P align="center"><IMG src="map.jpg" width="365" height="190" border="0" align="middle"></P> </BODY> </HTML> 下:地名のフレーム <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> </HEAD> <BODY> <CENTER> <TABLE border="1"> <TBODY> <TR> <TD>aaa</TD> </TR> <TR> <TD>bbb</TD> </TR> <TR> <TD>ccc</TD> </TR> </TBODY> </TABLE> </CENTER> </BODY> 上フレームのmap.jpgに、レイアウト名 aaa bbb ccc という3つのレイアウト枠を作り、そのレイアウト枠の中にyajirusi.jpgを入れて、非表示にさせています。そして、下フレームの、例えば地名aaaをマウスオーバーすれば上フレームのレイアウト名aaaを表示させ、マウスアウトすれば、再び非表示にさせるのが目的です。この補足でわかりますでしょうか？よろしくお願いいたします。

noname#199778

2003/06/15 18:21 回答No.1

別フレームの内容にJavaScriptからアクセスする場合は、 parent.対象のフレーム名.document.myIMG.src=**; のように、「parent.対象のフレーム名.」を通常のスクリプトの上につけるのが妥当と思います。地図のあるフレーム名を"main"として、その中にある画像ファイルをロールオーバーさせるのであれば、そのロールオーバーの対象になるimg要素のid名が"chngIMG"の場合は、 parent.main.document.chngIMG.src="***.jpg"; というようなスクリプトを、地名を記載したページ内に仕掛ければ、地名のフレームから地図のあるフレーム内の画像のロールオーバーを指定することができます。方法がいまいちつかめない場合は、まずホームページビルダーを使って、一ページ内でお望みの動作を実現する仕掛けを組んでください。そのあと、HTMLソースを開き、マウスオーバーでスクリプトを動かすリンクと、そこから起動されるスクリプトをカットし、地名を入れるページのHTMLファイルにそれらをそのまま移植してください。あとは、写し取ったスクリプト部分を参照し、その中の「document.～」となっている部分を全て「parent.上フレームの名前.document.～」に置換してみてください。上フレームの名前については、フレームをセットするHTMLを参照すれば記載してあると思います。なければ、地図のあるフレームの方のタグに「name="任意のフレーム名"」という属性を追加して、そこでつけたフレーム名をスクリプトの方に記入してください。少々わかりにくい話になってしまいましたが、参考になれば幸いです。乱文失礼しました。

質問者

補足 2003/06/16 13:58

さっそく実行してみましたが、 JavaScriptの知識が貧弱なため、思うようにいきません・・・そこで、ロールオーバーではなく、レイアウト枠を挿入する方法↓ 上:地図にレイアウト枠を作り、下:地名の文字に OnMouseOverでレイアウト表示 OnMouseOutでレイアウト非表示とイベント設定するやり方ではどうかと考えました。しかし、この方法もHPビルダーでは同フレーム内のみ有効で、別フレームでは機能しないです・・・ JavaScriptでこのようなイベントを別フレームに設定することは可能でしょうか?