• ベストアンサー

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

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

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

  • ベストアンサー
noname#199778
noname#199778
回答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"><!-- function point(i,sw){ if (document.getElementById){ parent.***.document.getElementById(i).style.visibility=sw; // ***の部分に上のフレーム名を入れてください } } //--></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のソースを検討して、矢印の画像の配置の仕方を工夫してみてください。 これでおそらくは上手くいくと思いますが…

spnk55
質問者

お礼

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

その他の回答 (2)

noname#199778
noname#199778
回答No.2

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

spnk55
質問者

補足

いろいろお手間を掛けさせてしまいすみません。 さて、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
noname#199778
回答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="任意のフレーム名"」という属性を追加して、そこでつけたフレーム名をスクリプトの方に記入してください。 少々わかりにくい話になってしまいましたが、参考になれば幸いです。 乱文失礼しました。

spnk55
質問者

補足

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

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 別のフレームに画像を表示させる

    検索をかけてみたのですが、同じ質問は見付からず 似た(？)ような質問の回答では理解出来ないので どなたかご存知の方が居ましたらお願い致します マウスを乗せた時、他の画像を表示させたり、画像に効果をつける ロールオーバーという機能の仲間なのではないかと思うのですが 「マウスを乗せた時、別のフレームに画像を表示させる」事は可能なのでしょうか？ フレームを上下に分けて、上は写真のサムネイルで そのサムネイルにマウスを乗せた時に 下のフレームに大きめの、サムネイルとは別の画像を表示させたいのですが やり方が判りません。 ロールオーバーも使った事がなかったのですが やってみたら(基本の効果は)、そこそこ理解出来ました。 フレームも最近覚えた初心者ですので、スクリプトも良く判りません (作られたソースを貼る位しか出来ません・・・・) 宜しくお願い致します

  • マウスオーバーで違う画像の表示をする

    おはようございます。 ホームページビルダーを使用しているのですが、マウスオーバーで違う画像を現在ある画像の上に表示する方法をご存知の方、ぜひ教えて下さい。 例えば簡易な地図画像があり、その中で各地図上にしかけがあり、花屋さんの上にマウスがいったら花屋さんの情報がその地図画像の上に現れるような感じです。 よろしくお願い致します！！！！！

  • 異なるフレームへの画像表示

    こんにちは。初心者なのでやりたいことが伝わるかわかりませんがよろしくお願いします。 HPビルダーを使ってHPを作成中です。 フレームを利用していますが、（A.B.C）Bフレームのに画像１（絵）をおき、この上をポインターが通ると フレームAの所定の場所に画像が現れるようにしたいのです。 Bフレームの画像（絵）は1だけでなく2.3.4.5.6.といった具合にたくさんありそれぞれが示す画像がAフレームの場所に入れ替わって表示されるということはできるのでしょうか？ Bフレームの画像1≠Aフレーム画像ではありません。 このようなことができる機能に名前はありますか？ よろしくお願いします。

  • フレームのあるの１フレームしか表示されない

    ビルダー７で３枚のフレームページを作成しました。 グーで私のＨＰを検索すると１つのフレームしか表示されない。どうしたら、よいのでしょうか？

  • ドリームウィーバーのフレームサイズ表示について

    はじめて、複数フレームの使用のページを、DW4で、作成しました。 　 フレームを、上・下・左と、右がメインと４つ分けているのですが、まず上の幅を80ピクセルで横いっぱいに・下の幅を80ピクセルで横いっぱいに・左の幅を130ピクセルにで上下の間に挟まれた状態で、どのブラウザのサイズでも固定して見えるようにしたいのですが、どうすれば良いのでしょうか。 　ちなみに、右のメイン画面以外は、スクロールバーを出さないようにしたいのです。 現在作成した状態ですと、左のフレームがスクロールできず（スクロールバーは非表示ですが、下の方の内容が動かず見えない）、右・メインはスクロールバーが、出て問題なし。上は固定されて問題なし。下は途中で画面が切れた状態です。 このようなフレームを、意図通り表示できる設定する方法を教えてください。 宜しくお願いします。

  • フレーム分割したページの表示で困っています。

    ホームページビルダー９でホームページを作成しています。 ページを上下に２分割して上のフレームにリンクメニューを、下のフレームにメニューのリンク先を表示するように作りました。 自分のデスクトップパソコンでは問題なく表示されているのですが、試しにＢ５サイズのノートパソコンで表示してみると、画面全体が表示されず、上のページのメニューボタンを表示しているところが下のフレームページで隠れてしまっているのです。 下フレームは属性で自動的にスクロールバーが出るように設定しているので問題ないのですが、上のメニューは「なし」に設定しています。 ※デザイン上、表示させたくないので。 ここからが質問です。 ページを表示させた時に、ページ全体のサイズを変えても上のメニューのフレームページが常に下のフレームページの上に来るように、つまり、上のメニューページのサイズは変わらないように固定させる方法（！？）を教えて下さい。 説明がへたで申し訳ないのですが、どうぞ宜しくお願いします。

  • onmouseoverで別フレーム表示

    ＨＰビルダー１０でＨＰ作成しています。 ＨＰは左右でフレーム分けし、左にコンテンツ。クリックするとその内容（掲示板等）を右フレームで表示できるようにしてます。 onmouseoverという処理があると分って、オンマウスで右フレームに 内容表示させようとしてますが、右フレームに飛ばずに 左フレーム内で表示してしまいます。 設定ではフレーム場所はあっているのですが・・・ どこか手を加えないといけないと思うんですが、その辺がわからずに 手付かず状態です。 説明不足ですが、宜しくお願い致します。

  • フレームで囲まれたページが表示しない

    ホームページビルダー７で作成したHPをFFFTPでアップしたのですが、フレーム（左と上）に囲まれたページが１ページだけ空白になって表示できません。 どうしたらよいでしょうか？ よろしくお願いします。

  • 背景をつなげる方法

    サイトの改装をしようといろいろやっているのですが、あるお気に入りのサイト様の仕様を見て、やってみたい！と思いました。が、方法がわかりません。 上下にフレームで分割してあり境界線はわからないようになっているのですが、その上のフレーム内と下のフレーム内の背景画像がつながっているように見えるのです。スクロールバーを動かしても背景が動かないので、スタイルシートでされてるのかな、なんて思ったりもしたのですが、方法がわかりません。 ご存知の方、どうか教えてください。 ＨＰ作成にはＷｉｎのビルダー７．０を使っています。が、あらかたビルダーで作っておいて、細かいところは自分でＨＴＭＬをいじっています。 どうぞよろしくお願いいたします。

  • フレームなどで、スクロールの表示を消すにはどうしたらいい?

    　すいません、教えてください。 フレーム機能を使っていると思うんですが、 画面からはみ出し多分は普通なら、 ▲ ▼ みたいなボタンが現れて、それをドラッグして 見えない部分を見ようとしますよね?▲と▼の 部分には長方形の物体が存在します。なんのことか わからないかもしれませんが、多分今見てるこのサイトでも 右横と一番下に現れてると思います。 　普通なら、画面からはみ出た部分は上に書いたような スクロールさせるための機能が自然に現れると思うんですが、 多分、フレーム機能を使った場合、そういうスクロールのための 表示がまったくされなくて、画面からはみ出た部分を見るには マウスの右クリックと左クリックの真中についてる、クルクル 回すやつで移動させないとだめな機能はどうやったらできるのでしょうか？ 　フレームで枠表示をさせないようもしたんですが、できませんでした。 　勿論、フレームを使っていない普通のＨＰの場合は画面に収まり 切れない部分がある場合、普通に画面右と下にスクロールするための 機能が出ることを言っているのではないです。 　あと、こういう機能を使うのはＨＰ閲覧者にとって どういう印象があるのでしょうか?見づらいでしょうか・・・?　

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する