画像を切り替えながら、説明文をその下に表示したい
画像を切り替えるのに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で表示できればと思っていますが、どうにも進みません。
教えてください。
お礼
お返事遅くなりまして住みません。大変に参考になりました。ありがとうございました。