※ ChatGPTを利用し、要約された質問です(原文:画像とコメントの同時表示をしたいのですが。)
画像とコメント表示方法について
このQ&Aのポイント
画像とコメントの同時表示をする方法について知りたいです。
現在のソースコードを使って、画像をクリックするたびにコメントも変更する方法について教えてください。
画像とコメントを一体で表示する方法についての質問です。
こんにちは。
画像(写真)についての質問です。回答の方よろしくお願いします。
以前に画像(縦・横位置混合)をボタンをクリックして変化させることを教えて頂きました。
今回はこの画像にコメント(説明文)を付加したいのです。
画像をクリックして変更するたびにその画像のコメントも変更されるようなコトはどうすれば良いのでしょうか?
以下に現在のソースを記します。
<SCRIPT LANGUAGE="JavaScript" TYPE="text/JavaScript">
<!--
ImgNum = 0; // 画像番号用の変数を作成。
Imgs = new Array(); // 配列を定義。
Imgs[0] = "traphoto/200209_01.jpg"; // 配列に画像のアドレスを代入。
Imgs[1] = "traphoto/200209_02.jpg"; // 実行時、数字の順に表示されます。
Imgs[2] = "traphoto/200209_03.jpg";
Imgs[3] = "traphoto/200209_04.jpg";
Imgs[4] = "traphoto/200209_05.jpg";
Imgs[5] = "traphoto/200209_06.jpg";
function NextChange(){ // 関数を定義。
img = new Image(); // Imageオブジェクトを作成
img.src = Imgs[++ImgNum % Imgs.length];
if(document.all){
PIC.innerHTML = "<IMG SRC=\"" + img.src + "\" WIDTH=\"" + img.width + "\" HEIGHT=\"" + img.height + "\">";
}
}
// -->
</SCRIPT>
<BODY bgcolor="#800000">
<DIV ID="PIC" align="center"><IMG SRC="traphoto/200209_01.jpg" width="400" height="300"></DIV>
<p align="center">
<font color="#FFFFFF" style="cursor : hand" face="HGS創英角ゴシックUB" onClick="NextChange();">Click Here!</font>
</p>
お礼
すみません! 私のミスでした。うまくコメントも画像も替えることが出来ました! 本当にありがとうございました。 もう一つ質問したいのですが。。。 コメントの文字のフォントを変更するにはどうすれば良いのでしょうか? table{ font-family:"HGS創英角ゴシックUB"; font-color:"#FFFFFF";} のようなものをスクリプト内に記述したら良いのでしょうか? よろしくお願い致します。
補足
ebis様 回答ありがとうございました。 早速やってみたのですが、うまくいきません。 やりたいコトは多分あってると思うのですが。。。 コメントはクリックで変わるようになったのですが、今度は画像が1枚目のまま固定となってしまいます。 両方替わるようにならないものでしょうか?? よろしくお願い致します。