![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
ただいまHPビルダーにてHPを作成しています。
上下にフレームを分けており、
上:地図
下:地名
として・・・
下フレームの地名(リンクを挿入してます)をマウスオーバーすれば、
上フレームの地図に場所を矢印で示す
というような効果ができないものかと考えてます。
これが同じページ内であれば、
HPビルダーの、ロールオーバー効果にて作成することも可能なのですが、
下フレームの地名がたくさんあって
スクロールする必要があるため、
常に地図を表示させるように
地図と地名を別フレームに分けたいのです。
アドバイスよろしくお願いいたします<(_ _)>
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_02.png?e8efa67)
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のソースを検討して、矢印の画像の配置の仕方を工夫してみてください。
これでおそらくは上手くいくと思いますが…
素晴らしい!
あちこちHPを検索して試してみても
できなかったことがようやくできました。
これでHP作成も次の段階へ進むことができます。
手間がかかるところ、丁寧にありがとうございました。
そして自分ももっと勉強して
JavaScriptが少しは理解できるようになりたいです。
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_02.png?e8efa67)
No.2
- 回答日時:
画像のロールオーバーも、レイアウト枠の表示・非表示の切り替えについても、別フレームからの操作は可能だと思います。
もしよろしければ、開示したくないファイル名やページ内容などは伏せていただいてかまいませんので、スクリプトを含むHTMLソースを補足していただけませんでしょうか。
ソースを見れば、解決できると思います。
この回答への補足
いろいろお手間を掛けさせてしまいすみません。
さて、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を表示させ、
マウスアウトすれば、再び非表示にさせるのが目的です。
この補足でわかりますでしょうか?
よろしくお願いいたします。
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_02.png?e8efa67)
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="任意のフレーム名"」という属性を追加して、そこでつけたフレーム名をスクリプトの方に記入してください。
少々わかりにくい話になってしまいましたが、参考になれば幸いです。 乱文失礼しました。
この回答への補足
さっそく実行してみましたが、
JavaScriptの知識が貧弱なため、
思うようにいきません・・・
そこで、ロールオーバーではなく、
レイアウト枠を挿入する方法↓
上:地図 にレイアウト枠を作り、
下:地名 の文字に
OnMouseOverでレイアウト表示
OnMouseOutでレイアウト非表示
とイベント設定するやり方ではどうかと考えました。
しかし、この方法もHPビルダーでは
同フレーム内のみ有効で、別フレームでは機能しないです・・・
JavaScriptでこのようなイベントを
別フレームに設定することは可能でしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
スマホ上で、左右スワイプで次...
-
<iframe>~</iframe>内のwindow...
-
別ページのインラインフレーム...
-
フレームを跨ぐドロップダウン...
-
前のページのurlを取得するには?
-
フレームを使用した複数プルダ...
-
hrefとonclickでのリンクの移動...
-
プルダウンのフォーカス解放の方法
-
ツリーメニュー内の下階層への...
-
2つのフレームに対して同時にリ...
-
<a href="#" …>の意味を教えて...
-
別ファイルのfunctionの読み込み方
-
bodyにidをつける理由は何ですか?
-
毎回、ページ読み込み時に1回...
-
JavaScriptでiframeの内容を「...
-
変数の代入値を外部の.txtファ...
-
マウスオーバーで文字にアンダ...
-
JavaScript でキーを送る
-
新しいウィンドゥを最大化で立...
-
javascriptでbgmを自動再生する...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
スマホ上で、左右スワイプで次...
-
インラインフレームで表示され...
-
フレームを跨ぐドロップダウン...
-
エラー:書き込みができません ...
-
子フレームの自動リロードは可...
-
インラインフレームをドラッグ...
-
チェックボックスのチェックを...
-
onunloadイベントでの画面制御...
-
openerは使えないのでしょうか?
-
submitボタンで他のフレームを...
-
親フレームのURLによって、...
-
フレーム内のiframeのデータの...
-
HTMLフォームボタンによるター...
-
親フレームからkeydownイベント...
-
HTMLでサブフレームから親のス...
-
フレームでの右クリック禁止
-
別ページのインラインフレーム...
-
他のフレームのスクリプトを実...
-
Safariで<iframe>のinnerHTMLを...
-
<iframe>~</iframe>内のwindow...
おすすめ情報