No.1
1482
133
20pt
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と同じ物にしないとうまくいきません。
No.2
134321
20pt
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(”
”, ”
”);
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=”
” ID=”img1” BORDER=”0”>1 ACCESS R</A>
<DIV ID=”display1” STYLE=”display:none”>
<A HREF=”JavaScript:onClick=Display(’display2’);ImageChange(’img2’);”><IMG SRC=”
” ID=”img2” BORDER=”0”>2 メニュー</A>
<DIV ID=”display2” STYLE=”display:none”>
<A HREF=”JavaScript:onClick=Display(’display3’);ImageChange(’img3’);”><IMG SRC=”
” ID=”img3” BORDER=”0”>3 BBS</A>
<DIV ID=”display3” STYLE=”display:none”>
<A HREF=”JavaScript:onClick=Display(’display4’);ImageChange(’img4’);”><IMG SRC=”
” ID=”img4” BORDER=”0”>4 CGI配布コーナー</A>
<DIV ID=”display4” STYLE=”display:none”>
<A HREF=”JavaScript:onClick=Display(’display5’);ImageChange(’img5’);”><IMG SRC=”
” ID=”img5” BORDER=”0”>5 CGI配布コーナー</A>
<DIV ID=”display5” STYLE=”display:none”>
<A HREF=”JavaScript:onClick=Display(’display6’);ImageChange(’img6’);”><IMG SRC=”
” ID=”img6” BORDER=”0”>6 CGI配布コーナー</A>
<DIV ID=”display6” STYLE=”display:none”>
<A HREF=”
”>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=”
”>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>
これでどうでしょう？
No.3
1482133
20pt
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=”
”>BBS</A>
<A HREF=”
”>検索エンジン集</A>
<A HREF=”
”>HP作成リンク集</A>
</DIV>
</DIV>
</DIV>
</BODY>
1
1
1
1
コメント（0件)