教えてください。お願いします。
たとえば、
左のフレームには(1)本のジャンル、(2)その下にはジャンル別に本のタイトルが入力されているというページ、
右フレームには(3)その本の内容が出てくるという構成で、

左フレームの(1)をクリックすると、そのページ下部分の(2)に飛び、同時に右フレームには(3)が出てくるというように、(1)をクリックすると同時にふたつ一緒に切り替わるリンク設定というのは可能でしょうか?

A 回答 (3件)

> 左フレーム部分は1ファイルにしていたのですが、


> タイトル1.htmlとタイトル2.htmlというように複数ページに別ければ可能なのですね。

左フレームを1ファイルにしても可能ですよ。<a name> で名前をつけてあげればOK。

先の回答の "左上に表示される.html" がこんなふうに変わる。

<html><body>
<script type="text/JavaScript">
function double_jump(url1, url2) {
parent.f2.location.href=url1
parent.f3.location.href=url2
}
</script>
本のジャンル
<ul>
<li><a href="#" onClick="double_jump('左上に表示される.html#title1', '内容1.html')">ジャンル1</a>
<li><a href="#" onClick="double_jump('左上に表示される.html#title2', '内容2.html')">ジャンル2</a>
</ul>

<br><br><br><br><br><br> <!-- ちょっと間を空けておこうか -->

<a name="title1">
本のタイトル1

<a name="title2">
本のタイトル2

</body></html>
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。
本当にすばらしいです。できました。javascriptってすごいですね。
今後もどうか宜しくお願いします。

お礼日時:2002/03/01 09:03

JavaScript で可能です。

ポイントはふたつ。

・表示先を変えるには、document オブジェクトの href プロパティを変えれば良い
・フレームに表示されている document から、別のフレームは parent.フレーム名 で参照できる

具体的には、親のソースがこんな感じ。

<html>
<frameset cols="25%,*">
<frameset rows="25%,*">
<frame src="左上に表示される.html" name=f1>
<frame src="about:blank" name=f2> <!-- 最初は空白で良い -->
</frameset>
<frame src="about:blank" name=f3> <!-- 最初は空白で良い -->
</frameset>
</html>

フレーム名は、左上が f1 、左下が f2 、右が f3 です。

左上に表示されるファイルはこんな感じ。

<html><body>
<script type="text/JavaScript">
function double_jump(url1, url2) {
parent.f2.location.href=url1
parent.f3.location.href=url2
}
</script>
本のジャンル
<ul>
<li><a href="#" onClick="double_jump('タイトル1.html', '内容1.html')">ジャンル1</a>
<li><a href="#" onClick="double_jump('タイトル2.html', '内容2.html')">ジャンル2</a>
</ul>
</body></html>

リンクをクリックされたときの動作を関数で処理して、その関数で、ふたつの表示先を変えています。

分からないところがあれば補足してください。
    • good
    • 0
この回答へのお礼

なるほどですね。すばらしいです。
左フレーム部分は1ファイルにしていたのですが、
タイトル1.htmlとタイトル2.htmlというように複数ページに別ければ可能なのですね。勉強になりました。
ページ数を増やしてトライします。ありがとうございました。

お礼日時:2002/02/26 14:05

おそらくJavaAppletで可能だと思います。


ソースはwebに転がっているので、探してみてください。
web/javaapplet/なんかで探すといいサイトが見つかると思います。
    • good
    • 0

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

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q ヽ(^。^)ノ ワードの「書式」→「フレーム」のことで……これで小さな枠を作っても、テキストボックスのような働きはしない?

 WindowsでWord2000を使ってます。
 「書式」の「フレーム」を開いて、新しいフレーム(上)とか新しいフレーム(左)とか、いろいろクリックすると、画面が細かく分割されます。そのフレームをマウスで移動させることもできて、おもしろいんですが、そうしてできた小さな枠のなかに文字を打って印刷しても、フレームは現われず、小さな枠のなかで3行で書いた文章も、印刷しますと1行になって出てきます。
 フレームで作った小さな枠には、「図形描画」の「テキストボックス」のような機能はないんでしょうか?
 そういう機能がないと、せっかくのこのフレーム、あまり意味がないと思うんですが?
 それとも、私のパソコンかプリンタの調子がわるいんでしょうか?

Aベストアンサー

ワードのフレーム機能は、複数の文書ファイルを1ページ内で
表示ための機能です。
フレームで区切られた領域は、それぞれ別の文書ファイルとして保存されます。

例えば、「文書1」というファイルを立ち上げてフレームをいくつか作ってみてください。
それぞれのフレームに、短い言葉(1,2,3とか亜、い、うなど)
を記入して保存します。
すると、「文書1」ファイルがあるフォルダに入力した文字と同じ名前の
文書ファイルがフレームの数だけ作られます。

あらかじめ作っておいた文書を好きなフレームに表示させることもできます。
任意のフレーム内で、右クリックからフレームのプロパティを選ぶと
参照(リンク)するファイルを選択できます。

ただ、印刷時はすべてのフレームを印刷することはできません。
アクティブな(カーソルがある)フレームが印刷対象になります。

ではこれは何のための機能なのか?
実はホームページを作成する為の機能のようです。
実際、名前をつけて保存から「Webページ」を選択すれば、
次回からは、ブラウザで開くことができます。
ブラウザ上ならば、すべてのフレームを一括印刷することができるので
yumi18さんの希望通りに印刷できると思います。

テキストボックスとしての機能はありませんが、
この面白さと、テキストボックスとしての機能を同時に求めるのなら
エクセルなどの表計算ソフトをお勧めします。

ワードのフレーム機能は、複数の文書ファイルを1ページ内で
表示ための機能です。
フレームで区切られた領域は、それぞれ別の文書ファイルとして保存されます。

例えば、「文書1」というファイルを立ち上げてフレームをいくつか作ってみてください。
それぞれのフレームに、短い言葉(1,2,3とか亜、い、うなど)
を記入して保存します。
すると、「文書1」ファイルがあるフォルダに入力した文字と同じ名前の
文書ファイルがフレームの数だけ作られます。

あらかじめ作っておいた文書を好きな...続きを読む

Q右クリックを左クリックと同じ効果に。

画像を使ったリンクで、右クリックを、左クリックをしたときと同じ効果(ページ移動)にするソースを教えていただけないでしょうか。
もちろん、右クリックメニューは表示されないものでお願いします。

Aベストアンサー

■スクリプト部分
<script type="text/javascript">
function jump(b){
switch (b.target){
case '_self':
case '': location.href = b.href; break;
case '_top': top.location.href = b.href; break;
case '_parent': parent.location.href = b.href; break;
case '_blank': window.open(b.href,''); break;
default: window.open(b.href,b.target); break;
}
}
</script>


■画像リンク部分
<a href="1.html" onmousedown="jump(this)" onclick="return false;"><img src="./1.jpg"></a>

左クリックと同等にするのなら、こんな感じかな?と思います。
(Operaを除く)

Firefox以外の IE、Netscape、Safariではリンク先に移動した状態でコンテキストメニューが出てしまいます。
それを防ぐなら移動先ページに
<script type="text/javascript">document.oncontextmenu = function(){ return false; }</script>

を書いておけば多少は効果があります。
右クリックメニューを出せなくしてしまうと、不快に感じる人も居ますので好みで。

■スクリプト部分
<script type="text/javascript">
function jump(b){
switch (b.target){
case '_self':
case '': location.href = b.href; break;
case '_top': top.location.href = b.href; break;
case '_parent': parent.location.href = b.href; break;
case '_blank': window.open(b.href,''); break;
default: window.open(b.href,b.target); break;
}
}
</script>


■画像リンク部分
<a href="1.html" onmousedown="jump(this)" onclick="return false;"><img src="./1.jpg"></a>

左...続きを読む

Q画像の枠にオシャレなフレームをつける事ができるサイト

よろしくお願いいたします。

私は今までブログに写真をUPする際は、「CURURU」というサイトで画像の枠にフレームをつけるオプションを利用していたのですが、残念な事にCURURUが今月末で閉鎖してしまう為、他のサイトや無料ソフトで画像にフレームをつける事ができる場所を探しております。

できれば少しオシャレなフレームなどがあるサイトだと嬉しいのですが。。><
過去の質問も検索し拝見させて頂きましたが、探しているようなサイトやソフトの紹介がなく質問させて頂きました。
大変困っております。。
どなたか分かる方がいらっしゃいましたら教えて頂けませんでしょうか?
よろしくお願いいたします。

*現在使用しているフレームの画像を添付いたします。

Aベストアンサー

サイトについては(閉鎖されてる可能性もあるので)紹介できませんが、
ソフトについては何度も回答している一つ覚え的なものですが紹介することはできます。

【PhotoScape】などはいかがでしょうか。
http://freesoftdownload.1-yo.com/image-editor/photoscape.html
紹介記事を書いているサイト
http://postcard.sakura.ne.jp/PhotoScape.html

添付した画像は、質問に添付したものを真似て加工したものです。

Q右の一覧表から必要なものをクリックすると、左の選択一覧用の表に選択されるようにするためには?

JavaScriptの勉強中なのですが、どこかのページにて見かけたことのある、以下のような仕掛けを組もうと四苦八苦しております。
どの様にすればよいか皆目見当がつかず、ヒントをいただければと思います。

左右二つに表を作成(問題がなければ<table>コマンドの予定)し、
左側を選択された項目、右側を一覧用の表とする。
右側の一覧表のうちのひとつをクリックすることでその表示が消え、左側の表にクリックされたものが表示される。
左側に選択表示されたものをクリックすることで、左側に選択表示されたものが消えて、元の右の一覧に表示される。

このような仕掛けはJavaScript特有のものだと思うのですが、もしもその方法についてお心当たりのある方はヒントをいただければと思います。

どうぞ、よろしくお願いいたします。

Aベストアンサー

順番は変えたくなかったのですね。
では、同じ構造のテーブルを用意しておいて、隠したり見せたりするのがよいかと。

ざっと書いてみました。

<script>
window.onload=function(){
var tags=document.getElementsByTagName("TR");
for(var i=0;i<tags.length;i++){
var id=tags[i].parentNode.parentNode.id;
if(id=="migi" || id=="hidari") tags[i].onclick=removeTR;
if(tags[i].parentNode.nodeName=="TBODY" &&id=="hidari") tags[i].style.display="none";
}
}
function removeTR(){
var id=this.parentNode.parentNode.id=="hidari"?"migi":"hidari";
this.style.display="none";
var tags=this.parentNode.getElementsByTagName("*");
for(var i=0;i<tags.length;i++){
if(tags[i]==this) break;
}
var tags=document.getElementById(id).getElementsByTagName("TBODY")[0].getElementsByTagName("*");
tags[i].style.display="";
}
</script>
<table id="hidari" style="float:left; margin-right:20px;" border>
<thead>
<tr><th>左の表</th></tr>
</thead>
<tbody>
<tr><td>test1</td></tr>
<tr><td>test2</td></tr>
<tr><td>test3</td></tr>
<tr><td>test4</td></tr>
<tr><td>test5</td></tr>
</tbody>
</table>

<table id="migi" border>
<thead>
<tr><th>右の表</th></tr>
</thead>
<tbody>
<tr><td>test1</td></tr>
<tr><td>test2</td></tr>
<tr><td>test3</td></tr>
<tr><td>test4</td></tr>
<tr><td>test5</td></tr>
</tbody>
</table>

順番は変えたくなかったのですね。
では、同じ構造のテーブルを用意しておいて、隠したり見せたりするのがよいかと。

ざっと書いてみました。

<script>
window.onload=function(){
var tags=document.getElementsByTagName("TR");
for(var i=0;i<tags.length;i++){
var id=tags[i].parentNode.parentNode.id;
if(id=="migi" || id=="hidari") tags[i].onclick=removeTR;
if(tags[i].parentNode.nodeName=="TBODY" &&id=="hidari") tags[i].style.display="none";
}
}
function removeTR(){
var...続きを読む

QHP作成のヒント。これってフレーム?枠?

ホームページ作成しようと思っているのですが・・・

http://ip.tosp.co.jp/i.asp?i=milk_marie

こんな風にしたいのですがこれってフレームでしてるのでしょうか。フレームではなく、枠ですか?

こんな感じで周りがピンクの枠でその中にスクロールバーを入れて、バック固定でしたいのですが、タグ等分かりましたら教えてください。
あと、こんな感じのタグが沢山あるサイトさんがあれば教えてください。イラスト素材ではなく・・・

ちなみにこのサイトさんは通りがかりで見つけたものですので参考までに・・・

Aベストアンサー

Javaはの知識はあまりないですが、そんなの使わなくても再現可能です。
ちなみにフレームでもできますが、そうでない方法を紹介します。

スタイルシートは分かりますか?
<style type="text/css">
<!--
body { border-width:20px; bordercolor:#ffcc99; border-style:solid;}
-->
</style>

これをヘッダーの中に埋め込みます。

URLを貼っておきます。
これは参考になると思います。

ちなみに今紹介したのは、最下部「その他の小技」の「ページを枠で囲む」という項目に載っています。

参考URL:http://hp.xrea.jp/m/index.html

Qインラインフレームで組まれたHTMLで子フレームより、親フレームのUR

インラインフレームで組まれたHTMLで子フレームより、親フレームのURLを参照したいです。
parent.locationで参照出来ることは、わかったのですが、サイトの制御がかかっているようで
これは、使えないようです。

サイトは、楽天です。

他に何か方法があればと思うのですが、
ご教授のほど、お願い致します。

Aベストアンサー

楽天に限らず、javascriptで他のサイトのコンテンツにアクセスする事は出来ません。
<iframe>でも<frameset>でもajaxでも不可能です。
どうしても、自サイト内に別途代理応答的な動きをするプログラムが必要です。
楽天の何を取得したいのかわかりませんが、RSS Feedみたいな特定のXMLなら
アクセス用のAPIサービスを提供しているサイトもありますが...
http://code.google.com/intl/ja/apis/ajax/documentation/
http://code.google.com/intl/ja/apis/ajaxlanguage/documentation/
http://developer.yahoo.co.jp/
http://pipes.yahoo.com/poolmmjp/feed_api
http://www.ajax-cross-domain.com/

Q枠がないフレーム

よく他のホームページで枠がないフレームがありますが
あれはどうやってプログラムを作ればよいのでしょうか?
このサイトも枠がないのですが、いわいるこんな感じです

Aベストアンサー

<frame border="0">
のことでしょうか。

フレームについては以下のサイトに詳しく載っています。

参考URL:http://papa345.hp.infoseek.co.jp/www/wwwreffr.htm

Qフレーム同時スクロール

お知恵を貸してください。
それぞれ3つのフレームがあり3つのファイルがあります。(下記の図)

左 | ヘッダーのフレーム   | A | B | |
の |--------------------------------------
フ | Bodyのフレーム | 値A| 値B| |
レ |
| |
ム |

があり、下にスクロールがあり、横にスクロールを
するとヘッダーの部分とBodyの部分が少しずつずれて
しまいます。(Aのヘッダーと値Aが同時に動いて少しずつずれが生じます。)これはどのようにソースを書いたらよいのでしょうか?ご教授お願いします。

Aベストアンサー

まだ検証しきれていませんが、
こちらのページのソースで
実現できるかと思います。

ただ改良点として、
ご提示の例では、
ヘッダの横幅をBodyの横幅と同じにする必要があります。
BODY直下にDIVで囲い、そのDIVにて
CSS(スタイルシート)で横幅を指定します。
さらにjavascriptと組み合わせて
動的に横幅を取得,設定する方法もありますが、
とりあえず以上まで。

参考URL:http://jsm.suepon.com/script/jsm37.html

QPhotoshop6.0木枠のフレームは?

http://dospara.okwave.jp/qa2849925.html
の質問の続きですが、確かにフレームはできました。
しかし木の枠みたいな、フレームの作成はPhotoshop6.0では無理ですかね!
宜しくお願いいたします。

Aベストアンサー

技量次第で何でもできるソフトです。
写真素材のテクスチャがあればそれを利用しても良いですが、無いなら自分で作成できます。
作成した画像を縦横に配置すればフレームが完成します。

http://www.furuoka.com/photoshop/text_wood_04.html

Qフレームでの右クリック禁止

フレームを使って、画面を分割しているのですが、単体のHTMLを開くと次に示すJavascriptで右クリックが出来なくなりますが、フレームにしてしまうと、出来なくなってしまいます。
フレームにしても右クリックを禁止するには、どうしたらよいでしょうか?
ご教授ください。よろしくお願いします。

<script language="JavaScript" type="text/javascript">
<!--
function contextmenu()
{
alert("右クリックは、使用できません。");
return false;
}
document.oncontextmenu = contextmenu();
-->
</script>

Aベストアンサー

フレームとスクリプトの位置関係が不明なのでわかりませんが、そのフレームに対して有効となるようにおかれていないのでは?

関係ないけど、javascript自体がユーザ環境に依存するので、右クリック禁止をスクリプトで行っても、たいして効果はないと思いますが・・・
(確か、Operaではもともと効かないという話しらしいし)


人気Q&Aランキング

おすすめ情報