javascriptを使った画像のキャプションについて教えてください

質問

こんにちは。
各サムネイルをクリックするごとに、拡大した画像が表示されるページを作成しているのですが、
その拡大画像ごとにキャプションをつける場合、どうすればいいのでしょうか。

-----------以下html----------------------------

<table>
<tr>
<td><a href="#" onclick="blocking(1); this.blur(); return false;">テスト</a></td>
</tr>
<tr>

<td class="binnen">
<div class="infor" id="nr1">

<a href="#" onclick="resizeImg('groot1',500,500); WM_imageSwap('groot1','images/test1.jpg');this.blur(); this.blur();
return false;"><img src="images/test1thumb.jpg" alt="" width="50" height="50" /></a>
<a href="#" onclick="resizeImg('groot1',500,500); WM_imageSwap('groot1','images/test2.jpg');this.blur(); this.blur();
return false;"><img src="images/test2thumb.jpg" alt="" width="50" height="50" /></a>
<a href="#" onclick="resizeImg('groot1',500,500); WM_imageSwap('groot1','images/test3.jpg');this.blur(); this.blur();
return false;"><img src="images/test3thumb.jpg" alt="" width="50" height="50" /></a>

<span class="groot"><a href="#" onclick="resizeImg('groot1',1,1); WM_imageSwap('groot1','images/spacer.gif');this.blur(); this.blur(); return false;">
<br><img name="groot1" src="images/spacer.gif" alt="" width="1" height="1" /><br></a></span></p>

</div>
</td>
</tr>

</table>

----------以下javascript------------

// resizeImg()
function resizeImg(imgId,width,height)
{
var objStr,obj;
if(document.images)
{
objStr = 'document.' + imgId;
obj = eval(objStr);
obj.width = width;
obj.height = height;
}
}

// WM_preloadImages()
function WM_preloadImages()
{
if (document.images)
{
if (typeof(document.WM) == 'undefined')
{
document.WM = new Object();
}
document.WM.loadedImages = new Array();
var argLength = WM_preloadImages.arguments.length;
for(arg=0;arg<argLength;arg++)
{
document.WM.loadedImages[arg] = new Image();
document.WM.loadedImages[arg].src = WM_preloadImages.arguments[arg];
}
}
}

// WM_imageSwap()
function WM_imageSwap(daImage, daSrc)
{
var objStr,obj;
if(document.images)
{
if (typeof(daImage) == 'string')
{
objStr = 'document.' + daImage;
obj = eval(objStr);
obj.src = daSrc;
}
else if ((typeof(daImage) == 'object') && daImage && daImage.src)
{
daImage.src = daSrc;
}
}
}

// blocking()
var supported = (document.getElementById || document.all);

if (supported)
{
document.write("<style type='text/css'>");
document.write(".infor { display:none; }");
document.write("</style>");

var max = 7;
var shown = new Array();
for (var i=1;i<=max;i++)
{
shown[i+1] = false;
}

}

function blocking(i)
{
if (!supported)
{
alert('This link does not work in your browser.');
return;
}
shown[i] = (shown[i]) ? false : true;
current = (shown[i]) ? 'block' : 'none';
if (document.getElementById)
{
document.getElementById('nr'+i).style.display = current;
}
else if (document.all)
{
document.all['number'+i].style.display = current;
}
}

---------以下css--------------------

.infor {
display:block;
}
.groot {
text-align:center;
display:block;
}
.binnen {
border:none;
}

------------------------------------------

よろしくお願いします。

回答No.3

fujillin

スクリプトをちゃんと見てませんが・・・
画像の処理と同様にHTML内にキャプションを用意しておいて、画像の入れ替えと同時にキャプションの入れ変えも行えばよいのでは？

＜例＞
----HTML-----
<span id="caption">キャプション</span>
----Script----
document.getElementById('caption').innerHTML = "新しいキャプション"

回答No.2

yambejp

「キャプションをつける」というのはどういう最終形を想定しているのか
わかりかねます、もうすこし仕様を詰めた方がよいかと

補足

説明不足ですみません。
拡大表示された画像の下などに説明やコメントなどを表示することです

回答No.1

pick52

キャプションってalt属性のことでしょうか。
それなら イメージオブジェクトの alt プロパティに代入すれば変更
できます。

img.alt = '文字列';

もし、違うならキャプションは何を指しているかを教えてください。

補足

説明不足ですみません。
たとえば拡大表示された画像の下などに説明やコメントなどを配置することです