画像を切り替えるのにJava Scriptで var pics_src = new Array("jpg/1.jpeg","jpg/2.jpeg","jpg/3.jpeg"); var num = 0; function go_forward(){ if (num == 2) { num = 0; } else { num ++; } document.getElementById("mypic").src=pics_src[num]; } function go_back(){ if (num == 0) { num = 2; } else { num --; } document.getElementById("mypic").src=pics_src[num]; } としようと思っています。同時に、この画像の説明文（全角で20文字くらい）を画像の下、または中に表示させたいと思っています。画像にPaintで描きこむことを考えましたが、画像数が数百あり、現実的でありません。頭の中では1.text,2.twext,3.textというファイルを作り、その中に説明文20字程度を記入、それをhtmlで表示できればと思っていますが、どうにも進みません。教えてください。

おしえて

画像の下に説明文をつけて切り替えていきたい

解決済

質問者：Proton1111
質問日時：2020/11/03 10:00
回答数：2件

画像を切り替えるのにJava Scriptで
<body>
<div align="center">
<img id="mypic" src="./jpg/1.jpeg" height="600px"><br>
<input type="button" value="戻る" onclick="go_back()">
<input type="button" value="進む" onclick="go_forward()">
</div>
<script>
var pics_src = new Array("jpg/1.jpeg","jpg/2.jpeg","jpg/3.jpeg");
var num = 0;
function go_forward(){
if (num == 2) {
num = 0;
}
else {
num ++;
}
document.getElementById("mypic").src=pics_src[num];
}

function go_back(){
if (num == 0) {
num = 2;
}
else {
num --;
}
document.getElementById("mypic").src=pics_src[num];
}
</script>
</body>

としようと思っています。
同時に、この画像の説明文（全角で20文字くらい）を画像の下、または中に表示させたいと思っています。
画像にPaintで描きこむことを考えましたが、画像数が数百あり、現実的でありません。
頭の中では1.text,2.twext,3.textというファイルを作り、その中に説明文20字程度を記入、それをhtmlで表示できればと思っていますが、どうにも進みません。

教えてください。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

参考程度に

No.2

回答者： fujillin
回答日時：2020/11/03 14:51

こんにちは

方法はいろいろ考えられますが、現状に追加で、単独にテキストを切り替えるのなら、画像と同様にすればよいでしょう。
https://design-spice.com/2010/07/27/javascript%E …

＞頭の中では1.text,2.twext,3.textというファイルを作り～
テキストの切り替えよりも、テキストファイルを読み込む方が難しいと思いますけれど・・・？
まぁ、jsファイルにしておけば、scriptタグを追記するだけで簡単に読むことは可能ですが。

多分、テキストと画像はセットになっているものと想像しますけれど、別の方法として、あらかじめ全部をhtml内に用意しておいて、表示／非表示で切り替えるという方法も考えられます。

表示／非表示の切り替えについても、直接styleを変更する方法と、クラス設定を変えることで事前に用意しておいたCSSの適用を切り替える方法等が考えられます。

- 0
- 件

通報する

この回答へのお礼

ありがとうございました。
超初心者で、ご回答が全て理解できたわけではありせん。
でも何となく、こんな方法があるかがわかりました。
今後気を付けて、本を読んでいきます。

通報する

お礼日時：2020/11/03 15:38

No.1ベストアンサー

回答者： babu_babu_baboo
回答日時：2020/11/03 14:51

<div align="center">

　<img id="mypic" src="./jpg/1.jpeg" height="600px"><br>
　<p id="mytxt" style="margin-top: -2em"></p>
　<p>
　　<input type="button" value="戻る" onclick="go(-1)">
　　<input type="button" value="進む" onclick="go(1)">
　</p>
</div>

<script>
var pics_src = ["jpg/1.jpeg","jpg/2.jpeg","jpg/3.jpeg"];
var pics_txt = ["aaaaa","bbbbbb","cccc"];
var num = 0;

function go (n){
　num = (num + 3 + n % 3) % 3;
　mypic.src = pics_src[num];
　mytxt.textContent = pics_txt[num];
}
go(0);

</script>