□ hitomi [2004年08月28日03時17分]

以下のようなメニューを作りたいのですが、こちらのサンプルも参考にしたの
ですが、上手なアレンジ方法がよくわからず･･･。

●メインメニューを8つほど縦に並べています。
●そのうちの「いくつか」にサブメニューがあります。
(なので、サブメニューが無いものもあります)
●サブメニューがあるものには、マウスクリックで開き、再度クリックで閉じる
「ツリー式メニュー」にしたいです。
●メイン、サブメニュー共にテキストではなく「画像」を使用したいです。
●メインメニューには全て、マウスを重ねると「指の形」になるようにしたいです。
●とりあえずI.E対応のみで良いです。

説明がややこしいかも知れませんが(すみません)、
こういった条件を満たせるタグがわかる方がいらっしゃいましたら、
どうか教えて下さい。
よろしくお願いいたします。

□ NXer [2004年08月28日23時03分]

はじめまして。NXerです。javascriptに興味があります。
次のように考えてローカルサーバーで試行してみました。
結果をお知らせします。

>アレンジ方法

その1）当方の考え方
（特に理解をもとめたり、強制するものではありません。読んでいる
うちに眠くなったら、すぐにその2）その3）の変更をみてください。
> 「ツリー式メニュー」のスクリプトを参照してください。）

-------------------行番号はその付近を見てください
28　/* ツリーに表示する項目
29 　list[x] = "1,2,3";
30 1.所属する親フォルダの番号 [x]（最初から表示しておく項目は空白に）
31 2.表示する名前
32 3.リンク先　（空白の場合はフォルダとして扱う）
-------------------------------------------------以上引用です。

配列[x]のデータ構成要素は、データ1、データ2、データ3と3ヶあります。
それぞれは、コンマで区切られています。内容は30〜32行の説明の
通りです。よく分からない時は、下の例を見てください。
親リストの名前に限って、データ3リンク先はありません。もちろん終わりには
コンマもありません。list[3]~[5]はリンク先があります。

listの配列を見てください。ただし、配列のうち0〜5までとします。
---------------------------------------
list[0] = ",親リスト1";
list[1] = "0,親リスト1-1";
list[2] = "1,親リスト1-1-1";
list[3] = "2,link:1-1-1-1,1-1-1-1.html";
list[4] = "2,link:1-1-1-2,1-1-1-2.html";
list[5] = "2,link:1-1-1-3,1-1-1-3.html";

その2）配列の変更（重要です）

>●メイン、サブメニュー共にテキストではなく「画像」を使用したいです。

おそらくデータ2のテキスト情報を画像にしたい、というご要望と思います。
そこで手元の画像を配列に一致させる番号を付けて配置しました。
---------------------------------------------
list[3] = "2,hikari3.gif,1-1-1-1.html";
list[4] = "2,hikari4.gif,1-1-1-2.html";
list[5] = "2,hikari5.gif,1-1-1-3.html";

その3）画像の表示のための工夫
--------------------------------------この前後の行番号
180　 menu_list += lay_print(i,pl[1],pl[2]);
-------------------------------------------------
これでデータ1のi(アイ）番目、データ2のテキストさらに
データ3リンク先が代入されています。

テキストならそのまま表示されますが、画像表示にはHTML言語の
img srcタグが必要となります。
javascriptで記述するには、’、”(シングル、ダブルクオート）
の使い方が複雑ですから、注意してください。ほとんど正しいのに
表示されない、私はダメだ、と引用記号一つで愚かにも思わないで
ください。
----------------------------------------------
/* イメージ サーチ*/
if (pl[2]) {
pl[1]="<img src ='"+dir+pl[1]+"'"+img_parm+">";
}
menu_list += lay_print(i,pl[1],pl[2]);
}
-----------------------------------------------
説明:もし　pl[2]の値が真ならば（リンク先があるのなら）、
pl[1]にテキスト文ではなく、画像表示のHTMLタグのスクリプトを
代入する
（当方も何が何かよくわかっていません。これで動きました。）

その4）まとめ：
----------------引用
●1メインメニューを8つほど縦に並べています。
●2そのうちの「いくつか」にサブメニューがあります。
(なので、サブメニューが無いものもあります)
●3サブメニューがあるものには、マウスクリックで開き、再度クリックで閉じる
「ツリー式メニュー」にしたいです。
●4メイン、サブメニュー共にテキストではなく「画像」を使用したいです。
●5メインメニューには全て、マウスを重ねると「指の形」になるようにしたいです。
●6とりあえずI.E対応のみで良いです。
--------------引用終わり
●6　当方のI.E.で表示できました。
●5　当方はこのあたり無知です。皆さんのHPのソースを参考にしてください。
●1〜4　すえぽんさんの指示に忠実に従ってください。
　　　　当方の変更をよろしければお試しください。
　　　　考え方の提案です。細部は工夫してください。

その4）ローカルサーバーのディレクトリ構成図
/~usr/
...|-/tree_menu/
........|-tree_menu.html
........|-hikari3.gif
........|-hikari4.gif
........|-hikari5.gif
........|-home_win.gif
........|-close_win.gif
........|-line1.gif
........|-1-1-1-1.html
........|-その他必要な画像やhtml

以上です。

＊＊＊＊＊＊＊＊＊＊＊ご存知ですか。
すえぽんさんは、『JavaScript+CGIハイブリッドスクリプト』
という本を1月に出版されました。8月28日、近くの書店の
コンピュータコーナーに配架されていました。JavaScriptの
棚に並んでいました。本書で、その3の「荒技」を思い付き
ました。著者名は末永政昭さんです。DART社出版です。
1月購入時点では2300円+税でした。

□ hitomi [2004年08月29日00時25分]

NXerさんはじめまして。ありがとうございます ! !　
とても詳しいご説明のおかげで、あれこれPCの前で苦戦しながらですが、
何とか希望通りの動作に成功しました。すごく参考になりました。
とは言っても私も「何が何だか」といった感じで未だに理解は
できてないんですけど･･･(笑)
でも、こんなにご丁寧な説明をして頂かなければ、きっと今もまだ
上手く出来てませんでした。本当にありがとうございました ! !

『JavaScript+CGIハイブリッドスクリプト』の本のことも
教えて頂きありがとうございます。早速買ってみます。