ワンクリックで二箇所に表示させる方法。

解決済

質問者：hitsujiko_t
質問日時：2005/05/31 23:45
回答数：4件

こんばんは。
下記のようなページを作っているのですが、質問です。

------￤-------------------
　　　￤ B
　　　￤-------------------
　　　￤
　A　￤ C
　　　￤　
　　　￤
　　　￤
　　　￤
---------------------------

（↑ずれていたらスミマセン…）
ABCはそれぞれテーブルのセルの中に入れています。
Cの部分はIframe使用です。
Aというセルにリンクを幾つか置く予定です。
それは通常Cのインラインフレームの中に表示されます。

質問の内容は、そのAの中にあるリンクの一つをクリックすると、Bの領域とCの領域にそれぞれ違うページを表示出来ないかというご相談なのです。
Aの中のリンクの一つをクリックすると、Bにサブメニューが出て、同時にCにはBのサブメニューに対する説明が出る…というような。
そしてBに表示されたサブメニューをクリックするとCに次々表示される、という形にしたいのです。

要領を得ない質問で恐縮ですが、どなたかお知恵をお貸し頂けると幸いです。宜しくお願い致します！

通報する

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

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： steel_gray
回答日時：2005/06/03 21:55

> 別ページを作る」と仰ってらっしゃる方法

#2さんの回答の方法のことです。

> Bはフレームではなくてただの<td>なのですが
Bのセルの中にもCと同じようにiframeを置いてフレームを書き換える、という手段を提案されています。

以下は前回のサンプルを少し変更したものです。
前回のものよりはご希望に近いとは思いますが、カスタマイズするにはそれなりの知識が要るという点ではかわっていません。

<html>
<head>
<title>Menu</title>
<script type="text/javascript">

</script>
</head>
<body>
<table border width=700>
<tr>
<td rowspan="2" width=100 valign="top">
<a href="http://www.google.co.jp/" target="iframe" onclick="MenuChange(1);">google</a><br>
<a href="#" onclick="MenuChange(2);return false;">goo</a><br>
<a href="http://www.yahoo.co.jp/" target="iframe" onclick="MenuChange(3);">yahoo</a>
</td>
<td id="CellB">
<div class="Menu1" style="display:none;">
メニュー１です。
</div>
<div class="Menu2" style="display:none;">
<a href="http://www.goo.ne.jp/" target="iframe" onclick="SubMenuClick()">goo</a>
<a href="http://oshiete.goo.ne.jp/" target="iframe" onclick="SubMenuClick()">教えて!goo</a>
</div>
<div class="Menu3" style="display:none;">
メニュー３です。
</div>
</td>
</tr>
<tr>
<td id="CellC" height="400" valign="top">
<iframe name="iframe" style="display:none;" height="400" width="590"></iframe>
<div class="Menu2" style="display:none;">
<h2>goo</h2>
<p>gooって何? gooでは、サーチ・コンテンツ・コミュニティ・ショッピング・ビジネス・リサーチなどの総合的なWebサービスを提供しています。</p>
<p>教えて!gooとは? 知りたい事を質問して回答して貰えるサービスです。</p>
</div>
</td>
</tr></table>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

何度もお手を煩わせてしまい、申し訳御座いませんでした。
折角素晴らしい回答を頂戴したのに、使いこなせず（まだまだ勉強が必要です…）この度は申し訳御座いませんが、諦め→スキルアップしてから再挑戦、という形にさせて頂きます。
本当に本当に有難う御座いました！
サンプルはもう、何も云う事無く素晴らしく、思う通りの動作なのですが…どうにも知識不足が否めません。

本当に有難う御座いました！

通報する

お礼日時：2005/06/04 00:50

No.3

回答者： steel_gray
回答日時：2005/06/01 09:20

Javascript部分がちょっと増えますが

セルBの内容やセルCに表示するメニューの説明を別ページにしないバージョンのサンプルを作ってみました。
（内容量によっては、素直に別ページに作った方がよさそうですが、内容量が少ない場合に。）

<html>
<head>
<title>Menu</title>
<script type="text/javascript">

</script>
</head>
<body>
<table border>
<tr>
<td rowspan="2">
<a href="#" onclick="MenuChange(1);return false;">メニュー１</a><br>
<a href="#" onclick="MenuChange(2);return false;">メニュー２</a><br>
<a href="ｘｘｘ.html" target="iframe" onclick="MenuChange(0)">メニュー０</a>
</td>
<td id="CellB">
<div class="Menu1">
<a href="ａａａ.html" target="iframe" onclick="SubMenuClick()">サブメニュー１-a</a>
<a href="ｂｂｂ.html" target="iframe" onclick="SubMenuClick()">サブメニュー１-b</a>
</div>
<div class="Menu2" style="display:none;">
<a href="ｃｃｃ.html" target="iframe" onclick="SubMenuClick()">サブメニュー２-c</a>
<a href="ｄｄｄ.html" target="iframe" onclick="SubMenuClick()">サブメニュー２-d</a>
</div>
<div class="Menu0" style="display:none;">
サブメニューなし。
</div>
</td>
</tr>
<tr>
<td id="CellC">
<iframe name="iframe" src="" style="display:none;"></iframe>
<div class="Menu1">
メニュー１の説明文<br>
メニュー１の説明文
</div>
<div class="Menu2" style="display:none;">
メニュー２の説明文<br>
メニュー２の説明文<br>
メニュー２の説明文
</div>
</td>
</tr></table>
</body>
</html>

この回答への補足

御礼遅くなりまして申し訳御座いません。
首記の方法を試させて頂きましたがどうしても上手くいきません。

上手くいかない内容。
1.セルBにサブメニューを表示させるのは1つのメインメニューリンクからだけで良いのに、リンクを未選択の状態からサブメニューが出てしまう。
2.上記の内容を取り敢えず無視。サブメニューを表示させたいメインメニューからのリンクをクリックすると、iframeに何も表示されない。但しサブメニューは表示され、それをクリックするとiframeにはサブメニューの内容が表示される。

です。
どうも内容的に初心者の手には余るようで…。
もしお手すきでしたら「別ページを作る」と仰ってらっしゃる方法をご教授頂けませんでしょうか。
宜しくお願い致します。

補足日時：2005/06/02 23:51

通報する

- 0
- 件

通報する

No.2

回答者： msi21st
回答日時：2005/06/01 03:27

kokorone様のご意見に補足させて頂く形になります。

２つのフレームのページを同時に変更する、
簡単なサンプルを載せさせて頂きました。
＿／＿／＿／＿／＿／＿／＿／＿／＿／＿／
<script>
　function sample(){
　　Ｂのフレーム名.location.href="アドレス";
　　Ｃのフレーム名.location.href="アドレス";
　}
</script>
<a href="#" onClick="sample()">
＿／＿／＿／＿／＿／＿／＿／＿／＿／＿／
の様にAタグ内の「onClick」イベントでsampleと言うファンクションが実行されます。
複数の処理を行う際に便利です。
【Ｂのフレーム名】【Ｃのフレーム名】と言う所は各フレーム名に変更して下さい。

＞Bに表示されたサブメニューをクリックするとCに次々表示される
はＢ内で
<a href="アドレス" target="Ｃのフレーム名">
で可能です。

ですので、ＢＣ共に名前を付けておく必要が有ります。

「onMouseover」はリンクにカーソルを乗せた時、
「onClick」はリンクをクリックした時に呼び出されますので、
かぶる事はありません。

長々と書かせて頂きましたが、マトに合った解答で御座いませんでしたらすみません。

この回答への補足

ご教授有難う御座います。
なのに、JavaScriptに関しても全く初心者以上の初心者で、申し訳ない事に記載されている内容が理解出来ませんでした…。
Bはフレームではなくてただの<td>なのですが、それでもこの方法は有効なのでしょうか？

また、現在別ページを呼び出すフレームではなく、インラインフレームを使用しているのですがその場合でも有効なのでしょうか。

補足日時：2005/06/02 23:56

通報する

- 0
- 件

通報する

No.1

回答者： kokorone
回答日時：2005/05/31 23:56

ＪａｖａＳｃｒｉｐｔで解決します。

まずは、考え方だけ説明します。
１）ＡのリンクのＯｎＣｌｉｃｋイベントで、
　　Ｂのセル内容の変更と、ＣのＩＦＲＡＭＥ
　　のＵＲＬを変更します。
２）ＢのリンクのＯｎＣｌｉｃｋイベントで、
　　ＣのＩＦＲＡＭＥのＵＲＬを変更します。
詳細は、明日にでも。。
サンプルが見つかれば、お知らせします。

この回答への補足

有難う御座います。
あの…一つ問題なのですが、実は書き漏れで（Javaを使うのですか…！）Aのセルの中でOnMouseoverイベントを使ってしまっています。
（同じセル内に
<A onmouseover="menu.innerText='**です。'" onmouseout="menu.innerText=''" href="../**/index.htm" target="iframe">***</A><BR>
<FONT id=menu color=black size="1"></FONT>
のような形です（OnClickイベントとは異なるかも知れませんが…）。
kokorone様の仰るJavaのOnClickイベントとは被らないでしょうか？

補足日時：2005/06/01 00:34

通報する