画像の切り替えボタンについて教えてください
サムネイルをクリックするごとに、拡大画像がそれらの下に表示されるページを作っています。
拡大された画像をクリックすると、再びサムネイルだけの状態に戻ります。
そこで質問なのですが、拡大された状態の時に、次の画像に進むボタンと戻るボタンを表示させ、実際に切り替えることができ、
サムネイルだけの状態の時にはボタンが表示されないといったものを作る場合、どういった様にすればいいのでしょうか。
いろいろ試してはみたのですが、当方初心者ですのでなかなか動いてくれません。
以下は進む、戻るボタン無しのソースです。
---------------------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;
}
}
// imageSwap()
function 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;
}
}
}
------------------------html---------------------------
<a href="#" onclick="resizeImg('test1',300,300); imageSwap('test1','image/test1.jpg')">
<img src="image/th-test1.jpg" alt="" width="50" height="50" /></a>
<a href="#" onclick="resizeImg('test1',300,300); imageSwap('test1','image/test2.jpg')">
<img src="image/th-test2.jpg" alt="" width="50" height="50" /></a>
<a href="#" onclick="resizeImg('test1',300,300); imageSwap('test1','image/test3.jpg')">
<img src="image/th-test3.jpg" alt="" width="50" height="50" /></a><br />
<a href="#" onclick="resizeImg('test1',1,1); imageSwap('test1','image/kuuhaku.gif');">
<img name="test1" src="image/kuuhaku.gif" alt="" width="1" height="1" /></a>
----------------------------------------------------
よろしくお願いします。
補足
ネットを見て回りましたが分かりませんでした。 ajaxがアドレスでファイルネームを送れるのでピッタリのようです。 参考になるページがあれば教えて下さい。 見て分かるか心配ですが(^_^;)