プロが教えるわが家の防犯対策術！

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

解決済

  • 質問者：spnk55
  • 質問日時：
  • 回答数：3件

ただいまHPビルダーにてHPを作成しています。

上下にフレームを分けており、
上:地図
下:地名
として・・・

下フレームの地名(リンクを挿入してます)をマウスオーバーすれば、
上フレームの地図に場所を矢印で示す
というような効果ができないものかと考えてます。

これが同じページ内であれば、
HPビルダーの、ロールオーバー効果にて作成することも可能なのですが、
下フレームの地名がたくさんあって
スクロールする必要があるため、
常に地図を表示させるように
地図と地名を別フレームに分けたいのです。


アドバイスよろしくお願いいたします<(_ _)>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.1

  • 回答者： lead1976
  • 回答日時：

別フレームの内容に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でこのようなイベントを
別フレームに設定することは可能でしょうか?

補足日時：2003/06/16 13:58
通報する
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： lead1976
  • 回答日時：

画像のロールオーバーも、レイアウト枠の表示・非表示の切り替えについても、別フレームからの操作は可能だと思います。


もしよろしければ、開示したくないファイル名やページ内容などは伏せていただいてかまいませんので、スクリプトを含む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を表示させ、
マウスアウトすれば、再び非表示にさせるのが目的です。

この補足でわかりますでしょうか？
よろしくお願いいたします。

補足日時：2003/06/17 15:28
通報する
    • good
    • 0
    • 件
通報する

No.3ベストアンサー

  • 回答者： lead1976
  • 回答日時：

補足見ました。



下の地名を表示するフレーム内の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のソースを検討して、矢印の画像の配置の仕方を工夫してみてください。

これでおそらくは上手くいくと思いますが…
    • good
    • 0
    • 件
通報する
この回答へのお礼

素晴らしい!
あちこちHPを検索して試してみても
できなかったことがようやくできました。
これでHP作成も次の段階へ進むことができます。

手間がかかるところ、丁寧にありがとうございました。
そして自分ももっと勉強して
JavaScriptが少しは理解できるようになりたいです。

通報する
お礼日時：2003/06/18 14:50

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報