WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:TDに表示されるテキストの表示切り替え方法

0:[投稿] キリッシュ [2006/11/21 23:54 ] [環境:わからない わからない]

花のホームページを作成しています。
そのギャラリーのページで、左側に花の縮小画像が並んでいて、縮小画像をクリックすると、右側に拡大画像とコメントが表示されるつくりにしたいと考えています。
javascriptで右側の拡大画像の表示を縮小画像をクリックする度に切り替えるのは出来たのですが、テキストの切り替え方法がわかりません。
Javascriptでtdタグ内のテキスト表示の切り替え方法ご存知の方、ご指南願います。


1:[回答] 通りすがり [2006/11/22 10:48 ]

こんにちわ〜
tdタグ内に<div>タグ入れてinnerHTML書き換える方法でどうでしょうか?
<div id="msg"></div>の中を
document.getElementById('msg').innerHTML = "コメント";
っとかいう感じで。
"コメント"部分を拡大画像に対応させて配列等にもたせておく感じ。


2:[回答] キリッシュ [2006/11/26 10:18 ]

こんにちは!キリッシュです。
アドバイスありがとうございました!!
実はJavascriptについて基本的知識が無く、いつも見よう見真似でやっていまして、今回もいただいたヒントをもとに二時間試行錯誤したのですができませんでした、、。

大変お手数ですが、下記のHTMLにJavascriptを書き込んでいただくことは可能でしょうか?
動作させたい内容をコメント部分に表記しました。
なにとぞ宜しくお願いいたします!

<HTML>
<HEAD>
<TITLE>gallery</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
</HEAD>

<BODY bgcolor="#FFFFFF" text="#000000">
<TABLE width="100%" border="1" cellspacing="0" cellpadding="0">
<TR>
<TD rowspan="2">
<!--s_imgA.jpgを押すとb_imgA.jpgという拡大画像が表示されてコメントAが表示される -->
<IMG src="images/s_imgA.jpg" width="50" height="50" alt="縮小画像A"><BR>
<BR>
<!--s_imgB.jpgを押すとb_imgB.jpgという拡大画像が表示されてコメントBが表示される -->
<IMG src="images/s_imgB.jpg" width="50" height="50" alt="縮小画像B"><BR>
<BR>
<!--s_imgC.jpgを押すとb_imgC.jpgという拡大画像が表示されてコメントBが表示される -->
<IMG src="images/s_imgC.jpg" width="50" height="50" alt="縮小画像C"></TD>
<TD>拡大画像</TD>
</TR>
<TR>
<TD>コメント</TD>
</TR>
</TABLE>
</BODY>
</HTML>


3:[回答] 通りすがり [2006/11/27 10:12 ]

こんな感じでテキスト表示の切替はできると思います。
msg_array[0] = "コメントA";
msg_array[1] = "コメントB";
msg_array[2] = "コメントC";
この辺りのコメントは変更してください。

▼追記▼
<HTML>
<HEAD>
<TITLE>gallery</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<script language="JavaScript" type="text/javascript">
<!--
// コメント
msg_array = new Array(3);
msg_array[0] = "コメントA";
msg_array[1] = "コメントB";
msg_array[2] = "コメントC";
//
function ShowMsg(idx){
 document.getElementById('msg').innerHTML = msg_array[idx];
}
// -->
</script>
</HEAD>

<BODY bgcolor="#FFFFFF" text="#000000">
<TABLE width="100%" border="1" cellspacing="0" cellpadding="0">
<TR>
<TD rowspan="2">
<!--s_imgA.jpgを押すとb_imgA.jpgという拡大画像が表示されてコメントAが表示される -->
<IMG src="images/s_imgA.jpg" width="50" height="50" alt="縮小画像A" onclick="ShowMsg(0)"><BR>
<BR>
<!--s_imgB.jpgを押すとb_imgB.jpgという拡大画像が表示されてコメントBが表示される -->
<IMG src="images/s_imgB.jpg" width="50" height="50" alt="縮小画像B" onclick="ShowMsg(1)"><BR>
<BR>
<!--s_imgC.jpgを押すとb_imgC.jpgという拡大画像が表示されてコメントBが表示される -->
<IMG src="images/s_imgC.jpg" width="50" height="50" alt="縮小画像C" onclick="ShowMsg(2)"></TD>
<TD>拡大画像</TD>
</TR>
<TR>
<TD><div id="msg">コメント</div></TD>
</TR>
</TABLE>
</BODY>
</HTML>


4:[回答] キリッシュ [2006/11/28 08:42 ]

コメント表示切り替えできました!感激です(T T)
これでホームページも先に進めます。
丁寧に教えていただき本当にありがとうございました!!

回答(必須): 状態:

お名前(必須):

URL:




[戻る]