人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

http://www5e.biglobe.ne.jp/~access_r/hp/dhtml/dhtml_126.html エクスプローラーツリー(2) - DHTML 上記の内容でエクスプローラーツリーを参考にして作成しているのですが、階層をもっと下まで(あと3くらい)まで、したいのですがどうしたらいいのでしょうか。

●質問者: jnisso
●カテゴリ:ビジネス・経営 コンピュータ
✍キーワード:エクスプローラー 作成 階層
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● sasada
●20ポイント

http://www5e.biglobe.ne.jp/~access_r/hp/dhtml/dhtml_126.html

エクスプローラーツリー(2) - DHTML

単純に、

<DIV ID=”displayA” STYLE=”display:none”>

<DIV ID=”displayB” STYLE=”display:none”>

<DIV ID=”displayC” STYLE=”display:none”>

<!-- コンテンツ -->

</DIV>

</DIV>

</DIV>

とDIVのネスティングを深くしていけばよいと思います。

その際、<DIV ID=”*****” ・・・>の”*****”が、ひとつのHTMLページの中で重ならないように、違う名前にするのが肝心です。

当然、

<A HREF=”JavaScript:onClick=Display(’*****’);ImageChange(’img4’);”>

の”*****”は、DIVのIDと同じ物にしないとうまくいきません。


2 ● いのくに
●20ポイント

http://www.hatena.ne.jp/1059992971#

http://www5e.biglobe.ne.jp/~access_r/hp/dhtml/dhtml_126.html エクスプローラーツリー(2) - DHTML 上記の内容でエクスプローラーツリーを参考にして作成しているのです.. - 人力検索はてな

<HTML>

<HEAD>

<META HTTP-EQUIV=”Content-Script-Type” CONTENT=”text/javascript”>

<TITLE>エクスプローラーツリー</TITLE>

<SCRIPT TYPE=”text/javascript”>

<!--

//画像のファイル名を指定して下さい

//(閉まっているフォルダが、folder1.gif・開いているフォルダが、folder2.gifとなります。

imagefile = new Array(”

http://www5e.biglobe.ne.jp/~access_r/hp/dhtml/folder1.gif

”, ”

http://www5e.biglobe.ne.jp/~access_r/hp/dhtml/folder2.gif

”);

image = new Array(imagefile.length);

for(count = 0; count < (imagefile.length - 1); count++){

image[count] = new Image();

image[count].src = imagefile[count];

}

function ImageChange(id){

if(window.document.images[id].src.indexOf(imagefile[0]) != -1){

window.document.images[id].src = imagefile[1];

}else{

window.document.images[id].src = imagefile[0];

}

}

function Display(id){

if(document.all){

if(document.all(id).style.display == ”block”){

document.all(id).style.display = ”none”;

}else if(document.all(id).style.display == ”none”){

document.all(id).style.display = ”block”;

}

}else if(document.getElementById){

if(document.getElementById(id).style.display == ”block”){

document.getElementById(id).style.display = ”none”;

}else if(document.getElementById(id).style.display == ”none”){

document.getElementById(id).style.display = ”block”;

}

}

}

//-->

</SCRIPT>

</HEAD>

<BODY>

<A HREF=”JavaScript:onClick=Display(’display1’);ImageChange(’img1’);”>

<IMG SRC=”

http://www5e.biglobe.ne.jp/~access_r/hp/dhtml/folder1.gif

” ID=”img1” BORDER=”0”>1 ACCESS R</A>

<DIV ID=”display1” STYLE=”display:none”>

<A HREF=”JavaScript:onClick=Display(’display2’);ImageChange(’img2’);”><IMG SRC=”

http://www5e.biglobe.ne.jp/~access_r/hp/dhtml/folder1.gif

” ID=”img2” BORDER=”0”>2 メニュー</A>

<DIV ID=”display2” STYLE=”display:none”>

<A HREF=”JavaScript:onClick=Display(’display3’);ImageChange(’img3’);”><IMG SRC=”

http://www5e.biglobe.ne.jp/~access_r/hp/dhtml/folder1.gif

” ID=”img3” BORDER=”0”>3 BBS</A>

<DIV ID=”display3” STYLE=”display:none”>

<A HREF=”JavaScript:onClick=Display(’display4’);ImageChange(’img4’);”><IMG SRC=”

http://www5e.biglobe.ne.jp/~access_r/hp/dhtml/folder1.gif

” ID=”img4” BORDER=”0”>4 CGI配布コーナー</A>

<DIV ID=”display4” STYLE=”display:none”>

<A HREF=”JavaScript:onClick=Display(’display5’);ImageChange(’img5’);”><IMG SRC=”

http://www5e.biglobe.ne.jp/~access_r/hp/dhtml/folder1.gif

” ID=”img5” BORDER=”0”>5 CGI配布コーナー</A>

<DIV ID=”display5” STYLE=”display:none”>

<A HREF=”JavaScript:onClick=Display(’display6’);ImageChange(’img6’);”><IMG SRC=”

http://www5e.biglobe.ne.jp/~access_r/hp/dhtml/folder1.gif

” ID=”img6” BORDER=”0”>6 CGI配布コーナー</A>

<DIV ID=”display6” STYLE=”display:none”>

<A HREF=”

http://www5e.biglobe.ne.jp/~access_r/hp/cgi/

CGI

”>7 CGI配布コーナー</A>

<A HREF=”

http://www5e.biglobe.ne.jp/~access_r/hp/javascript/wscc_mov.html

Web Safe Color Checker(Mouse Over Version) - JavaScript

”>7 Web Safe Color Checker(Mouse Over Version)</A>

<A HREF=”

http://www5e.biglobe.ne.jp/~access_r/hp/javascript/wscc_cv.html

Web Safe Color Checker(Click Version) - JavaScript

”>7 Web Safe Color Checker(Click Version)</A>

</DIV>

<A HREF=”

http://www5e.biglobe.ne.jp/~access_r/hp/cgi/

CGI

”>6 CGI配布コーナー</A>

<A HREF=”

http://www5e.biglobe.ne.jp/~access_r/hp/javascript/wscc_mov.html

Web Safe Color Checker(Mouse Over Version) - JavaScript

”>6 Web Safe Color Checker(Mouse Over Version)</A>

<A HREF=”

http://www5e.biglobe.ne.jp/~access_r/hp/javascript/wscc_cv.html

Web Safe Color Checker(Click Version) - JavaScript

”>6 Web Safe Color Checker(Click Version)</A>

</DIV>

<A HREF=”

http://www5e.biglobe.ne.jp/~access_r/hp/javascript/wscc_mov.html

Web Safe Color Checker(Mouse Over Version) - JavaScript

”>5 Web Safe Color Checker(Mouse Over Version)</A>

<A HREF=”

http://www5e.biglobe.ne.jp/~access_r/hp/javascript/wscc_cv.html

Web Safe Color Checker(Click Version) - JavaScript

”>5 Web Safe Color Checker(Click Version)</A>

</DIV>

<A HREF=”

http://www5e.biglobe.ne.jp/~access_r/hp/javascript/wscc_mov.html

Web Safe Color Checker(Mouse Over Version) - JavaScript

”>4 Web Safe Color Checker(Mouse Over Version)</A>

<A HREF=”

http://www5e.biglobe.ne.jp/~access_r/hp/javascript/wscc_cv.html

Web Safe Color Checker(Click Version) - JavaScript

”>4 Web Safe Color Checker(Click Version)</A>

</DIV>

<A HREF=”

http://www5e.biglobe.ne.jp/~access_r/hp/javascript/wscc_mov.html

Web Safe Color Checker(Mouse Over Version) - JavaScript

”>3 Web Safe Color Checker(Mouse Over Version)</A>

<A HREF=”

http://www5e.biglobe.ne.jp/~access_r/hp/javascript/wscc_cv.html

Web Safe Color Checker(Click Version) - JavaScript

”>3 Web Safe Color Checker(Click Version)</A>

</DIV>

<A HREF=”

http://www5e.biglobe.ne.jp/~access_r/hp/javascript/wscc_mov.html

Web Safe Color Checker(Mouse Over Version) - JavaScript

”>2 Web Safe Color Checker(Mouse Over Version)</A>

<A HREF=”

http://www5e.biglobe.ne.jp/~access_r/hp/javascript/wscc_cv.html

Web Safe Color Checker(Click Version) - JavaScript

”>2 Web Safe Color Checker(Click Version)</A>

</DIV>

</BODY>

</HTML>

これでどうでしょう?


3 ● sasada
●20ポイント

http://www.hatena.ne.jp/1059992971?

http://www5e.biglobe.ne.jp/~access_r/hp/dhtml/dhtml_126.html エクスプローラーツリー(2) - DHTML 上記の内容でエクスプローラーツリーを参考にして作成しているのです.. - 人力検索はてな

先ほどの書き方では、分かりにくかったと思いますので、例を挙げておきます。

エクスプローラツリーのHTMLの<BODY>から</BOODY>を下記のものと入れ替えてみてください。

動作と仕組みの関係がわかると思います。

====================================

<BODY>

<A HREF=”JavaScript:onClick=Display(’LEVEL0’);ImageChange(’img1’);”> <!-- LEVEL0 ON/OFF -->

<IMG SRC=”folder1.gif” ID=”img1” BORDER=”0”> ACCESS R</A>

<DIV ID=”LEVEL0” STYLE=”display:none”> <!-- LEVEL0 の ブロック -->

<A HREF=”JavaScript:onClick=Display(’LEVEL1’);ImageChange(’img2’);”> <!-- LEVEL1 ON/OFF -->

<IMG SRC=”folder1.gif” ID=”img2” BORDER=”0”> メニュー (LEVEL1)</A>

<DIV ID=”LEVEL1” STYLE=”display:none”> <!-- LEVEL1 の ブロック -->

<A HREF=”JavaScript:onClick=Display(’LEVEL2’);ImageChange(’img2’);”> <!-- LEVEL2 ON/OFF -->

<IMG SRC=”folder1.gif” ID=”img2” BORDER=”0”> メニュー (LEVEL2)</A>

<DIV ID=”LEVEL2” STYLE=”display:none”> <!-- LEVEL2 の ブロック -->

<A HREF=”

http://cgi.www5e.biglobe.ne.jp/~access_r/cgi-bin/wforum/wforum.c...

ACCESS R BBS

”>BBS</A>

<A HREF=”

http://www5e.biglobe.ne.jp/~access_r/hp/search/search.html

検索エンジン集

”>検索エンジン集</A>

<A HREF=”

http://www5e.biglobe.ne.jp/~access_r/hp/link/hplink.html

HP作成リンク集

”>HP作成リンク集</A>

</DIV>

</DIV>

</DIV>

</BODY>

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ