はじめまして。
フレームのコンテンツ表示を下のURLのように
+や-を押して、パカッて開いたり閉じたりできないでしょうか?
http://www.jp.uo.com/
可能ならどこかサンプルなどサイトをご存知ではないでしょうか?
ぜひ教えて下さい。お願いします。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

こんにちはyanbouさん、xruzです。


こんな感じでしょうか?(動作確認:Ie5.5sp2のみ)

<html>
<head>
<title>プルダウンメニュー</title>
<script language="javascript">
<!--
var isMenu = "hidden";
function onmenu(mnu,submenu,x,y)
{
document.all(submenu).style.visibility=isMenu=(isMenu=='hidden')?'visible':'hidden';
mnu.innerText=(isMenu=='hidden')?'+':'-';
document.all('div2').style.top=(document.all('menu1').innerText=='-')?116+18*3:116;
}
// -->
</script>
</head>
<body bgcolor="azure" style="font-size:16px">
<div id='div1' style="position:absolute; left:10; top:100; width:200;">
<a id="menu1" href="#" onClick="onmenu(this,'menu11');return false">+</a>LINK1
<div id="menu11" style="position:absolute; left:-2; top:16; visibility:hidden;">
<tt>
├<a href="http://www.goo.ne.jp/" target='mainframes'>Goo Japan</a><br>
├<a href="http://www.msn.co.jp/" target='mainframes'>MSN Japan</a><br>
└<a href="http://www.ibm.co.jp/" target='mainframes'>IBM Japan</a><br>
</tt>
</div>
</div>
<div id='div2' style="position:absolute; left:10; top:116; width:200;">
<a id="menu2" href="#" onClick="onmenu(this,'menu21');return false">+</a>LINK2
<div id="menu21" style="position:absolute; left:-2; top:16; visibility:hidden;">
<tt>
├<a href="http://www.goo.ne.jp/" target='mainframes'>Goo Japan</a><br>
├<a href="http://www.msn.co.jp/" target='mainframes'>MSN Japan</a><br>
└<a href="http://www.ibm.co.jp/" target='mainframes'>IBM Japan</a><br>
</tt>
</div>
</div>
</body>
</html>

がんばってくださいね。
    • good
    • 0
この回答へのお礼

xruzさん、ありがとうございました。
こんなのがほしかったです。
サンプルまで頂いてすいませんでした。
頑張ります!!(^-^)

お礼日時:2001/10/30 10:30

始めまして、単刀直入に言うと出来ます。


但し、URLのページの+や-は「Jpg」つまり絵なので、その絵を用意しなければ無理です。
文字のみでのと言うことでしたら、簡単に出来ます。
サンプルを乗せておきますので宜しければどうぞ。

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS">
<META NAME="GENERATOR" CONTENT="Oracle JDeveloper">
<TITLE>タイトル</TITLE>
</HEAD>
<script language="JavaScript">
<!--
function Menu (one, two) {
if (one.style.display == 'none') {
one.style.display='';
}
else {
one.style.display='none';
}
}
-->
</script>
<BODY>
<DIV onClick="Menu(tree1, MENU1)">
<SPAN ID="MENU1" CLASS="title">
<a title="onMouseされた時の表示する文字" target="ContentsFrame">見せておく文字</a>
</SPAN>
</DIV>
<DIV ID="tree1" STYLE="display:none;">
<UL>
<LI><A HREF="表示させるhtmlのURL" target="Frame名">リスト1</A><BR>
<LI><A HREF="表示させるhtmlのURL" target="Frame名">リスト2</A><BR>
<LI><A HREF="表示させるhtmlのURL" target="Frame名">リスト3</A><BR>
</UL>
</DIV>
</BODY>
</HTML>

補足しますと、ツリー表示させたい下の部分をDIVタグでくくり
STYLE="display:none;"でディスプレイから見えないように隠しています。
DIVタグで文字をくくりonclikでjavaScriptに飛びツリー表示の下部部分を表示させるようにしています。
メニューを増加させる場合は
<SPAN ID="MENU1" CLASS="title">
のID="MENU1"をID="MENU2"と言うようにし
<DIV ID="tree1" STYLE="display:none;">の
ID="tree1"をID="tree2"等とし増やせばOKです。

宜しければ参考にして下さい。
    • good
    • 0
この回答へのお礼

kaji_0131ありがとうございました。
増やし方も乗せてくださっていましたから
わかりやすかったので助かりました。
参考に作成をしてみます!!

お礼日時:2001/10/30 11:05

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

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

Qlocation.href="http://www.aaa.aa.aa"でリンクされない!?

ラジオボタンを選択して、ラジオボタンが選択物によって最後にサブミットボタンを押した時に違うリンク先へ飛ばす方法をいろいろと考えていました。

考えた末にジャバスクリプトでリンク先を違う方法に変える事にしました。

ステップ1として
サブミットが押された時点でリンクさせる方法を試みましたが同じページを読み込んでしまいます。
サンプルは下記の通りです。
location.href="http://www.aaa.aa.aa"

どうかうまくいく方法を教えて頂けないでしょうか?
お願いします。

Aベストアンサー

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
function link(){
var flag = 0;
for(i=0; i<document.forms[0].address.length; i++){
if(document.forms[0].address[i].checked){
flag = 1;
window.location.href = document.forms[0].address[i].value;
}
}
if(flag == 0){
alert('ラジオボタンで行き先を指定してください。');
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="radio" NAME="address" VALUE="http://www.1.co.jp/">
<INPUT TYPE="radio" NAME="address" VALUE="http://www.2.co.jp/">
<INPUT TYPE="radio" NAME="address" VALUE="http://www.3.co.jp/">
<INPUT TYPE="button" onClick="link();" VALUE="ジャンプ">
</FORM>
</BODY>
</HTML>

こういうことがしたいのかな・・・。
質問の意図をハズしてしまったかも・・・。(^^;
そしたらごめんなさい。
まぁ、ご参考までに・・・(爆)

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
function link(){
var flag = 0;
for(i=0; i<document.forms[0].address.length; i++){
if(document.forms[0].address[i].checked){
flag = 1;
window.location.href = document.forms[0].address[i].value;
}
}
if(flag == 0){
alert('ラジオボタンで行き先を指定してください。');
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="radio" NAME="address" VALUE="http://www.1.co.jp/">
<INPUT TYPE="radio" NAME="addres...続きを読む

Qhttp://www.ajaxmail.jp/のAjaxmailを使用

http://www.ajaxmail.jp/のAjaxmailを使用いたしております。リンクをクリックするとメールフォームがポップアップで表示されるのですが、このフォームのスクリプトに対して最初のリンクのクリックと同時にPOSTでデータを送りたいと思っておりますがうまく行きません。

ソースは以下


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>AjaxMail:Ajaxを活用したフリーPHPメールフォーム</title>
<link rel="stylesheet" type="text/css" href="css/lightview.css" />
<script type="text/javascript" src="js/protoculous-effects-packer.js"></script>
<script type="text/javascript" src="js/lightview.js"></script>
</head>

<body>

<div style="margin:200px">

<form name="form1" action="http://xxxx.com/ajaxmail-utf-8/ajaxmail/sample.php" method="post">
<input type="hidden" name="str" value="xxxx@xxxx.xx.xx">
</form>

<a href='JavaScript:document.form1.submit()' rel='iframe' title='送信フォームタイトル :: 送信フォーム説明文 :: width: 750, height: 600' class='lightview'>text1</a>
</form>

フォームをポップアップさせるJavaScriptとPOSTを制御するJavaScriptとの組み合わせの仕方がよくわかりません。

恐れ入りますがどなたかご教授頂けると幸いです

http://www.ajaxmail.jp/のAjaxmailを使用いたしております。リンクをクリックするとメールフォームがポップアップで表示されるのですが、このフォームのスクリプトに対して最初のリンクのクリックと同時にPOSTでデータを送りたいと思っておりますがうまく行きません。

ソースは以下


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>AjaxMail:Ajaxを活用したフリーPHPメールフォーム</title>
<li...続きを読む

Aベストアンサー

===続き===
<p><strong>内容</strong><br />
<textarea cols="50" rows="10" name="内容" id="内容">
</textarea>
</p>
<p><input type="submit" value="確認する"></p>
</form>
<script type="text/javascript" language="javascript">
function ajax_popup(no){
var form_data,Kanrisya_Mail;
switch(no){
case 1:
Kanrisya_Mail="hogehoge1@fuga.fuga";
form_data="1";
break;
case 2:
Kanrisya_Mail="hogehoge2@fuga.fuga";
form_data="2";
break;
case 3:
Kanrisya_Mail="hogehoge3@fuga.fuga";
form_data="3";
break;
default:
Kanrisya_Mail="";
form_data="";
break;
}
document.getElementById("E-mail").value=Kanrisya_Mail;
document.getElementById("内容").value=form_data;
Lightview.show({href:'#ajaxForm',rel:'inline',title:"送信フォーム",
options:{autosize:true,topclose:true}});
document.observe('lightview:opened',function(){
new Spry.Widget.ValidationTextField("checkText1", "none", {validateOn:["change"]});
new Spry.Widget.ValidationTextField("checkText2", "email",{validateOn:["change"]});
});
}
function ajaxsend(){
var form_data={"E-mail":document.getElementById("E-mail").value,
"内容":document.getElementById("内容").value};
Lightview.show({href:'./ajaxmail/sendmail.php',rel:'ajax',
options:{autosize: true,topclose:true,ajax:{parameters:form_data,}}
});
}
</script>
</body>
</html>

===続き===
<p><strong>内容</strong><br />
<textarea cols="50" rows="10" name="内容" id="内容">
</textarea>
</p>
<p><input type="submit" value="確認する"></p>
</form>
<script type="text/javascript" language="javascript">
function ajax_popup(no){
var form_data,Kanrisya_Mail;
switch(no){
case 1:
Kanrisya_Mail="hogehoge1@fuga.fuga";
form_data="1";
break;
case 2:
Kanrisya_Mail="hogehoge2@fuga.fuga";
form_data="2";
break;
case 3:
Kanrisya_...続きを読む

Qhttp://www.skuare.net/test/horizont

http://www.skuare.net/test/horizontinyscrolling.html
上記のサイト様で使用しているjavascriptを使ってデザインを考えています。

上記のサイト様は、メニューとコンテンツが同じフレーム内(階層)にありますが、
これを、メニューとコンテンツを別々のフレームに入れ(コンテンツ部分はインフレームに入れたいです。)、メニューを常に見える状態にしたいです。
(添付画像参照)

上記の状態までは、問題なくページを作れています。
しかし、色々試してはみたのですが、フレームに入れるとなかなかうまく行かず困っています。
どのように直せば良いでしょうか…

どうぞ宜しくお願い致します。

Aベストアンサー

このjavascriptを使って親からiframeコンテンツ内部をスクロール制御するよう
直すのは結構たいへんそうです。

私なら、iframeコンテンツのhtmlの中に、このjavascriptと、
スクロールナビゲーションリンクのタグを非表示で、そのまんま
設置しておいて、


親にも設置したナビゲーションリンクから、iframe内のナビゲーションリンク
をjavascriptで突っつきます。

Qhttp://www.rapty.com/

http://www.rapty.com/

上記のサイトのメインコンテンツである、左上の箇所ですが、一定の時間が経過すると右のサムネイルアイコンが切り替わり大きい画像もそれに合わせて切り替わります。

さらに、右のサムネイルをマウスオーバーすると、それにも合わせて各画像が切り替わる上、どのバナーをクリックしてもジャンプできるようにもなっています。

これはもちろんフラッシュで作られているのですが、これをJavaScriptで全く同じようにする事は可能でしょうか?

Aベストアンサー

素のままでやってみたらちょっと長くなってしまった。

考え方はいろいろあると思うので、あくまでもたたき台のサンプルです。
hover時の枠の部分を画像でやっていないので、ちょっと似てない。(画像に変えれば似ると思う)
メインの部分は画像一枚なのか、いろいろ書けるようにするのかよくわからん。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head><title>test</title>
<style type="text/css">
#wrapper { width:780px; height:300px; border:2px ridge #eee; position:relative; overflow:hidden;}

#navi { list-style:none; margin:2px; padding:0; position:absolute; right:0; z-index:10; font-size:0; }
#navi li { padding:2px; padding-left:15px; }
#navi li.active { background-color:#f44; }
#navi li a { display:block; text-decoration:none; }
#navi li img { width:200px; height:70px; _height:69px; border:0; }

#content { list-style:none; margin:0; padding:0; position:relative; }
#content li { position:absolute; width:780px; height:300px; display:none; overflow:hidden; background-color:#cfe;}
#content li a { display:block; width:100%; height:100%; text-decoration:none; color:#000; }
#content li.active { display:block; }

li#mask { background-color:#fff; display:none; z-index:5; filter:alpha(opacity=0); opacity:0; }
</style>
</head>
<body>
<div id="wrapper">
<ul id="navi">
<li class="active"><a href="test1.html"><img src="A.jpg" alt="#"></a></li>
<li><a href="test2.html"><img src="B.jpg" alt="#"></a></li>
<li><a href="test3.html"><img src="C.jpg" alt="#"></a></li>
<li><a href="test4.html"><img src="D.jpg" alt="#"></a></li>
</ul>
<ul id="content">
<li id="mask"></li>
<li class="active">
<a href="test1.html">
content1
<br>ここは画像1枚でもいいし、
<br><strong>文章でもいい。</strong>
<br>ただし、はみ出しても表示されない。
<br><img src="E.jpg" alt="picture" style="margin-top:150px;">
</a>
</li>
<li>
<a href="test2.html">content2</a>
</li>
<li>
<a href="test3.html">content3</a>
</li>
<li>
<a href="test4.html">content4</a>
</li>
</ul>
</div>

<script type="text/javascript">
<!--
(function() {
var u = document.getElementById('navi');
var mask = document.getElementById('mask');
var navs = document.getElementById('navi').getElementsByTagName('LI');
var cnts = document.getElementById('content').getElementsByTagName('LI');
var grovalTid, maskTid, duration = 5000;
try { u.addEventListener("mouseover", func, false);
} catch(e) { u.attachEvent("onmouseover", func); }
grovalTid = setTimeout(change, duration);

function func(evt) {
var t = evt.target || evt.srcElement;
if (t.nodeName != 'IMG') return;
while (t.nodeName != 'LI') t = t.parentNode;
if (modeSet(t, 0)) return;
fadeIn(t);
}

function fadeIn(e) {
var i, k;
clearTimeout(grovalTid);
if (maskTid) clearInterval(maskTid);
maskTid = setInterval(fade(), 40);
for (i=0; i<navs.length; i++) {
k = e==navs[i]?1:-1;
modeSet(navs[i], k);
if (cnts[i+1]) modeSet(cnts[i+1], k);
}
}

function fade() {
var o = 95;
setOpacity(mask, o);
mask.style.display = 'block';
return function() {
o -= 5;
o = Math.max(o, 0);
setOpacity(mask, o);
if (o > 0) return;
clearInterval(maskTid); maskTid = null;
mask.style.display = 'none';
grovalTid = setTimeout(change, duration);
}
}

function change() {
for (var i=0; i<navs.length; i++) if (modeSet(navs[i], 0)) break;
fadeIn(navs[++i % navs.length]);
}

function modeSet(e, n) {
if (n>0) { e.className += ' active';
} else if (n==0) { return e.className.match(/(^|\s)active$/);
} else { e.className = e.className.replace(/(^|\s)active$/, ''); }
}

function setOpacity(e, o) {
e.style.filter = 'alpha(opacity=' + o + ')';
e.style.opacity = o / 100;
}
})();
//-->
</script>
</body>
</html>

素のままでやってみたらちょっと長くなってしまった。

考え方はいろいろあると思うので、あくまでもたたき台のサンプルです。
hover時の枠の部分を画像でやっていないので、ちょっと似てない。(画像に変えれば似ると思う)
メインの部分は画像一枚なのか、いろいろ書けるようにするのかよくわからん。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head><title>test</title>
<style type="text/css">
#wrapper { width:780px; height:300px; border:2px ridg...続きを読む

Q元々あるデモデータ(http://css-tricks.com/dow

元々あるデモデータ(http://css-tricks.com/downloads/)に変更を加えたいです。
デモ二番目【Grid Accordion】を参考に少しいじっているのですが、なぜだか<a>~</a>のリンクが効きません。具体的には…

オリジナルは、
<dl>
<dt></dt>
<dd></dd>

<dt></dt>
<dd></dd>

<dt></dt>
<dd></dd>

...
</dl>

こういった作り方で、<dd>の中はテキストだけが入っている状態です。
やりたい事は、この<dd>の中に、更に

<ul>
<li><a></a></li>
</ul>

を入れて変更を加えて、最終的に<a>のURLにジャンプさせたいのですが、なぜだかこの<a>のリンクが効かなくなりました。

リンクを正常に効くようにするにはどうすればいいでしょうか?
おそらくセットになっていたinfogrid.jsの一部を変えればいいと思ったのですが、ここで詰まっています。
アドバイスよろしくお願いします。

Aベストアンサー

ざっとしか見ていませんが…

16行目の
// clicking image of inactive column just opens column, doesn't go to link
以下の数行にa要素をクリックした場合の処理が記してあります。
簡単に書けば、アクティブな(正確には親要素がclass="curCol"の)カラムではないリンク要素の場合はキャンセル。
アクティブならリンクを実行。 ということで各カラムのトップの画像部分のリンクタグを想定して作成されているようです。
カラムがアクティブな時とそうでない時に、画像をクリックすると動作が違うのを確認してみてください。
このため、他のリンクタグも(親要素がclass="curCol"でないので)一律にキャンセルされてしまっています。

キャンセルしているのは
 e.preventDefault();
の行の部分ですので、それをコメントアウトすればリンクは効くようになりますが、もともとの機能が損なわれてしまいます。


両立させるのなら、(↑)の画像のリンクと他のリンク要素を識別できるようにして(画像リンクだけに共通のclassを与えるとか)、それ以外はキャンセルしないようにすればよろしいかと思います。


きちんと全部を読み取って回答しているわけではありませんので、見落としがあったらご容赦。

ざっとしか見ていませんが…

16行目の
// clicking image of inactive column just opens column, doesn't go to link
以下の数行にa要素をクリックした場合の処理が記してあります。
簡単に書けば、アクティブな(正確には親要素がclass="curCol"の)カラムではないリンク要素の場合はキャンセル。
アクティブならリンクを実行。 ということで各カラムのトップの画像部分のリンクタグを想定して作成されているようです。
カラムがアクティブな時とそうでない時に、画像をクリックすると動作が違うのを確認してみ...続きを読む


人気Q&Aランキング

おすすめ情報