- ベストアンサー
ホームページに画像とコメントを表示する。
今回初めてホームページをつくります。 htmlのサンプル集から作っているのですがなかなかうまくいかずに困ってます。 横にサムネイルを表示してクリックされたら大きい画像と画像の下にコメントを表示するように作りたいのですがどうしてもコメントがでません。 ---------- <SCRIPT language="JavaScript"> <!-- var pn=0; <!-- 画像 --> photo=new Array(); photo[pn++] = "1.jpg"; photo[pn++] = "2.jpg"; photo[pn++] = "3.jpg"; pn=0 <!-- コメント --> msg=new Array(); msg[pn++] = "test。"; msg[pn++] = "test2。"; msg[pn++] = "test3。"; var n=photo.length,keno,tid,tate=50; <!-- 一覧の表示 --> for(i=0;i<n;i++){document.write("<IMG class='s' style='width:120;' src="+photo[i]+" onclick='keno="+i+";m_out();'><BR><BR>");} <!-- 大きい写真を表示する --> function m_out(){document.getElementById("myimg").src=photo[keno].replace(/thum/,"pic");} <!-- ☆ --> //--> </SCRIPT> <!-- ↑写真小さい --> <!-- ↓写真大きい --> <IMG id="myimg" style="width:400;border:4px ridge #eeffff;" src="1.jpg"> <!-- ★ --> <!-- ↑写真大きい --> ---------- 多分、☆の位置にコメント用のfunctionと★の位置にコメントを表示する何かを書けば出るのかと思い いろいろ試してみたのですがなかなかうまくいかず。。。 どうかよろしくお願いします。
- みんなの回答 (2)
- 専門家の回答
質問者が選んだベストアンサー
多分こういうことをしたいのではないですか。IE限定ですが↓ <html><head> <SCRIPT language="JavaScript"> <!-- var pn=0; /*-- 画像 --*/ photo=new Array(); photo[pn++] = "1.jpg"; photo[pn++] = "2.jpg"; photo[pn++] = "3.jpg"; pn=0; /*-- コメント --*/ msg=new Array(); msg[pn++] = "test。"; msg[pn++] = "test2。"; msg[pn++] = "test3。"; var n=photo.length,keno,tid,tate=50; /*-- 写真小さい一覧の表示 --*/ for(i=0;i<n;i++){document.write("<IMG class='s' style='width:120;' src="+photo[i]+" onclick='keno="+i+";m_out();'> ");} document.write("<BR><BR>"); /*-- 大きい写真とコメントを表示する --*/ function m_out(){ document.getElementById("myimg").src=photo[keno]; document.getElementById("myText").innerText = msg[keno]; /* IE限定 */ } /*-- ☆ --*/ //--> </SCRIPT> </head> <body> <!-- ↓大きい写真とコメントを表示 --> <IMG id="myimg" style="width:400;border:4px ridge #eeffff;" src="1.jpg"> <div id="myText">test。</div> <!-- ★ --> </body> </html>
その他の回答 (1)
innerTextというのが昔はIE限定でした。 今では動作するブラウザも増えているようですが、どれが対応しているのか、というのはわからないですね。 innerHTMLというのがありますので、innerTextよりもinnerHTMLを使うことをおすすめします。 (innerTextで書ける内容でしたら、innerHTMLの時は同じ書き方で良いと思います。 本来の意味は、文字通りTextかHTMLの違いです。)
お礼
ありがとうございます。 innerHTMLに書き換えて試してみます。 見えないブラウザの方がいたら別途対応するように調整してみます。
お礼
ありがとうございます。 私のやりたかったことそのままです。 でもなんでIE限定なのですか? 今、firefoxでは動作確認はできたのですが。。。 もし動かないブラウザを知っていたら教えていただけないでしょうか?