「その他１６■table■可変tableメニュー作成」と同じ構造のJavaScriptですが、マウスオン時のtitle文字指定を削除しました。
それだけがメニュー作成とは違います。上項目部分は、不要なら削除できます。
ただ今回は、文字全部に星の画像が入っています。
メニュー作成と同じように、データの文字の項目に <img src='●'>を入れる方法でもできますが、全部に画像を入れる場合には、JavaScriptのtable組立部分に入れた方が簡単です。
方法は、「その他９■table■自動table項目複数Ｂ」と同じです。下記で詳しく説明します。
データ項目が２個の、JavaScriptの可変tableです。今回は、データの中の１個目（第一要素の"文字"）だけに画像タグが使用できます。
■データを記述するだけで、リンク付きのメニューボタンが作成できます。ただしマウスオンでtitle文字は出ません。
・メニューのマウスオンで、title説明が出ます。 ←今回はこの部分を削除しました。
・メニューのマウスオンで、ボタンの色が変わります。（CSS指定）。自分好みに指定しても可。
・文字の他に画像も使用できます。（データにタグ指定も可ですが、見本ではJavaScriptのtable組立部分で指定）
・横列、縦行の変更が数値変更するだけで可能。
１. 最初にtableのセルの数を考えて、縦と横の指定をする
最初に表示したいデータの数を考えます。見本は２５個（上項目部分は含みません）なので、
var col=5;//★横に並べる列の数
var row=5;//★縦に並べる行の数
セルを横１×縦２５で並べることも可能ですし、横４×縦７にすることもできます。この２つの数値を修正するだけです。余ったセルは空白表示になります。
◆◇◆ 実際には、var row=●;の縦の行の数は、キッチリではなく多めに指定しても大丈夫です。何もデータの無い行は、表示自体がされません。データのある行だけ表示されます。その代わりデータの数よりセルの数が少ないと、表示しきれないデータがでてきます。
上項目部分は横の列の数に合わせて調整するか、削除して下さい。◆◇◆
２. tableのセル全部に画像を入れる方法
今回はメニュー全てに、文字の前に星の画像が入っています。
こんな場合はJavaScriptのデータの中に１個ずつ記述するより、tableの組立部分に記述する方が簡単です。
JavaScriptのソースの中でも説明してありますが、
array[i][j] ="<a href='"+myurl+""+Tga[i*col+j][1]+"' target='"+Target+"'><img src='an15.gif'>"+Tga[i*col+j][0]+"</a>";}
この行の<img src='an15.gif'>という画像指定を削除して、
array[i][j] ="<a href='"+myurl+""+Tga[i*col+j][1]+"' target='"+Target+"'>"+Tga[i*col+j][0]+"</a>";}
とすると、画像は無くなります。
３. tableのセルのデータ記述方法
１行の中に記述するデータは２個です。そして、下記の順番を必ず守って下さい。
Tga[k++]=["文字","リンク先"];
この横に並ぶ順番を間違うと、正しく表示されません。
もちろんいままでどおり、セルの入れ替えは自由にできます。
Tga[k++]=["<img src='an17.gif'>キラキラ星","mouse/mouse_moji1.html"];
：
：
Tga[k++]=["ランダムスライドbody・下端","bg/bg_k5.html"];
上記が今回のtableのデータの記述です。
最初の行だけ、文字の位置に画像が入っています。
画像を表示する時は、<img src='an17.gif'>と、タグも一緒に記述して下さい。
そして、他の自動、可変tableと同じく、データにタグを記述する時は、「"」ではなく「'」を使用します。
４．位置指定の方法
いろいろと面倒なので、位置指定はdivの#wakuTではなく、tableの#Tbでします。
そのまえに、この二つの説明をします。
この自動、可変tableは、bodyに＜table id="Tb"＞＜/table＞と記述しても表示しないので、tableを＜div id="wakuT"＞＜table id="Tb"＞〜〜〜＜/table＞＜/div＞で囲む形で表示しています。
ただし、＜table id="Tb"＞〜〜〜＜/table＞の部分はJavaScriptのソースの中に記述してあります。
いろいろな文章の下にこのtableを表示したい時、そのbodyの中の場所に＜div id="wakuT"＞＜/div＞を記述することで、tableの位置指定ができるのです。
ところがdivは、は左から●px、上から●pxという位置指定は簡単ですが、中央配置するには、横幅サイズを指定しないとできません。
サイズ指定ができれば問題ないのですが、大量のデータを並べると具体的なサイズが不明です。
しかしtableは、具体的な横幅がなくても中央配置が可能です。だからtableの#Tbで位置指定する方が、簡単なのです。
#wakuTと#Tbの関係は、ためしに#wakuTに背景色を指定してみるとわかります。
他のJavaScriptとの記述の違い
項目が１個だけでも複数でも、このtableのJavaScriptは、他の当サイトのJavaScriptと大きく違う点があります。
それはデータ番号を記述する場所に、数字が入ってない点です。普通は
Tga[0]=〜〜〜
Tga[1]=〜〜〜
Tga[2]=〜〜〜
と、数字が入っているところが、
Tga[K++]=〜〜〜
Tga[K++]=〜〜〜
Tga[K++]=〜〜〜
となっています。
これは行の入れ替えを簡単にするためです。数字を入れていると、下の行を上にしたり途中の行を丸ごと削除した時には、番号を付け直す必要があります。
じゃあ、他のJavaScriptもそうすればいい？
いえいえ、たとえばコメント付きの簡単スライドショーの場合を考えてみて下さい。
数字を付けることで、ga[0]の画像にmes[0]のコメントが記述しやすくなります。
数字が無いと間違えて ga[3]の画像に、mes[4]のコメントを付けてしまったりします。間違えた場合、どの行を間違ったのかの把握も難しいです。
でも画像だけのスライドショーの場合は、ga[i++]で記述してあれば、最新の画像を一番上に記述して、数字を書き直す必要がないというメリットはあります。
ケース・バイ・ケースでどうぞ。
tableの場合も、「行の入れ替えや削除をする必要が全くない」か、「入れ替えたり削除したら、自分で数字を書き直す」のであれば、
Tga[0]=〜〜〜
Tga[1]=〜〜〜
Tga[2]=〜〜〜
と記述しても、大丈夫です。
なお参考にしたサイトがたくさんあります。代表的なものを２つだけ紹介します。
行と列を指定してtableを作る方法は、HAKUHIN's home pageから。
２次元配列に連番を付ける方法は、＠ITから。