- ベストアンサー
１つのテーブルに任意の文字を表示させたい
１行１列のテーブル（テキストボックスみたいなもの）を作っておきます。 テーブルの横もしくは下にリンクを張った？文字又は画像にマウスが乗ると用意してある任意の文字がテーブルに表示させる事は出来るのでしょうか？多分ＪＡＶＡスクリプトで実現するものだと思うのですが・・・？ イメージとしてはリンクさせる文字の上にカーソルが乗るとリンク先の簡単な説明が表示され、クリックで目的ページに飛ぶというようなものです。リンクによって表示される内容が違いますが、表示されるテーブルは同じものを使いたいのです。 質問の内容も判りずらく、失礼な質問ですがよろしくお願いします。
- kaz85
- お礼率66% (2/3)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
リンク先の説明を表示するテーブルを用意して、リンクの上にマウスが乗るたびにそのテーブルの中のテキストを切り替えて、マウスが乗ったリンクの説明を表示させたいということですよね。 以下のようなものではいかがでしょうか。 <html> <head> <script type="text/javascript"> <!-- br=0; br0=navigator.userAgent; if (br0.match(/Opera/i)){ if (br0.match(/[0-6].[0-9][0-9]/)){ br=1; } } /* Opera対策：Opera 6.xxのDOMの実装が不完全なので、それらをはじくために利用。 */ var exptxt= new Array(); exptxt[0]="初期状態のテキスト"; exptxt[1]="リンク1の説明文"; exptxt[2]="リンク2の説明文"; exptxt[3]="リンク3の説明文"; exptxt[4]="リンク4の説明文"; exptxt[5]="リンク5の説明文"; /* 上記部分で各リンクの説明文を入れておきます。 */ function linkexp(i){ if (document.getElementById && br!=1){ document.getElementById("expl").innerHTML=exptxt[i]; } else { document.F1.T1.value=exptxt[i]; } } // --> </script> </head> <body onLoad="linkexp(0)"> <table><tr><td> <div id="expl"> <form name="F1" action="#"> <textarea name="T1" rows="8" cols="50"></ textarea> </form> </div> </td></tr></table> <a href="***.htm" onMouseover="linkexp(1)">リンク1</a> <a href="***.htm" onMouseover="linkexp(2)">リンク2</a> <a href="***.htm" onMouseover="linkexp(3)">リンク3</a> <a href="***.htm" onMouseover="linkexp(4)">リンク4</a> <a href="***.htm" onMouseover="linkexp(5)">リンク5</a> </body> </html> 一応、ご質問にあるような動作は確保できていると思います。 なお、上記ソースではテキストエリアタグの終止タグを潰してありますので、コピーしたときはそのあとに終止タグの半角スペースを除去してください。 参考になれば幸いです。
その他の回答 (2)
- neue_reich
- ベストアンサー率21% (138/647)
簡単な実例を作ってみましたので、これをアレンジしてみて下さい。 ただ、ＨＴＭＬがわかったレベルではちょっと難しい処理ですので、 勉強が必要だと思いますよ。 <html> <head> <script type="text/javascript"> function ch_mode(flg){ id1="a1"; id2="a2"; if(flg=="0"){ for(i=0;i<document.all.item(id2).length;i++){ document.all.item(id2,i).style.display=""; } for(i=0;i<document.all.item(id1).length;i++){ document.all.item(id1,i).style.display="none"; } }else if(flg=="1"){ for(i=0;i<document.all.item(id1).length;i++){ document.all.item(id1,i).style.display=""; } for(i=0;i<document.all.item(id2).length;i++){ document.all.item(id2,i).style.display="none"; } } } </script> </head> <body> <table id="a1" style="display:none" onmouseover="ch_mode(0)"><tr><td>一つ目のテーブル</td></tr></table> <table id="a2" style="display:inline" onmouseout="ch_mode(1)"><tr><td>二つ目のテーブル</td></tr></table> </body> </html> 動きが怪しい部分があるかとは思いますが、 とりあえず、動くはずです。
お礼
お礼が遅くなってごめんなさい。 やっぱり、難しいんですね。それが判っただけでも・・・。 これから、勉強してみる意欲が？沸いてきました。 単純にコピーしただけでは動きませんでしたが、内容が判っていないので、解るようになったらまた質問させていただきます。その時はよろしくお願いします。 親身になって教えていただきありがとうございました。
- neue_reich
- ベストアンサー率21% (138/647)
ちょっと面倒ですが、スタイルシートを制御すれば 可能ですよ。 document.all.item(ＩＤ名,部品番号).style.display="none" としてやると、指定したＩＤ名のついた部品（divとかtable） が非表示になります。 部品番号は複数同時に動かしてやる場合に良く使いますが、 一箇所だけでいいのでしたら「０」として置いてください。 <table id="t1" style="display:inline"><tr><td>通常の表示</td></tr></table> <table id="t2" style="display:none"><tr><td>マウスを乗せたときの表示</td></tr></table> とすると、イメージがつかめるかと思いますが、 ＩＤ＝ｔ１ のテーブルを通常時に表示しておき、 マウスが乗ったら（JavaScripでイベントを拾ってください） ＩＤ＝ｔ２ のテーブルを表示すると質問文に書いてあるような 動きになると思います。
補足
早速の回答ありがとうございます。 書くのを忘れていましたが、ＨＴＭＬをかじった？？まだそこまでもいっていないかも？位の実力です。それなのに、こんな難しい事を考えるな～っと叱られそうですが、スタイルシート？JavaScripでイベントを拾ってください？？？ まだ無理なら・・・もう少し勉強してから質問しますが・・・。もう少し説明していただけたらとっても嬉しいです。失礼かとも思いますがよろしくお願いします。
お礼
お礼が遅くなってごめんなさい。 すっ！すごーい！そうです。これです。何が書いてあるのかまだ理解することが出来ませんが、少し勉強してみます。解るようになったらきっと新天地が・・・。 本当にありがとうございました。今後ともよろしくお願いします。