解決済み

画像の切り替えボタンについて教えてください

  • すぐに回答を!
  • 質問No.4326424
  • 閲覧数262
  • ありがとう数2
  • 気になる数0
  • 回答数3
  • コメント数0

お礼率 80% (4/5)

サムネイルをクリックするごとに、拡大画像がそれらの下に表示されるページを作っています。
拡大された画像をクリックすると、再びサムネイルだけの状態に戻ります。

そこで質問なのですが、拡大された状態の時に、次の画像に進むボタンと戻るボタンを表示させ、実際に切り替えることができ、
サムネイルだけの状態の時にはボタンが表示されないといったものを作る場合、どういった様にすればいいのでしょうか。

いろいろ試してはみたのですが、当方初心者ですのでなかなか動いてくれません。

以下は進む、戻るボタン無しのソースです。

---------------------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>

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

よろしくお願いします。

質問者が選んだベストアンサー

  • 回答No.3

技量より器量だった。
<html>
<head>
<style>
.view{display:none;border:1px #fee solid;}
</style>
</head>
<body>
<div class="imgbox">
<div class="imglist">
<img src="./image/th-testa000.jpg" alt="000" width="80" height="80" class="mini">
<img src="./image/th-testa001.jpg" alt="001" width="80" height="80" class="mini">
<img src="./image/th-testa002.jpg" alt="002" width="80" height="80" class="mini">
<img src="./image/th-testa003.jpg" alt="003" width="80" height="80" class="mini">
<img src="./image/th-testa004.jpg" alt="004" width="80" height="80" class="mini">
</div>
<div class="view">
<img src="" alt="Photo" class="big"><br>
<input type="button" value="<" class="bfo">
<input type="button" value=">" class="nxt">
</div>
</div>
<div class="imgbox">
<div class="imglist">
<img src="./image/th-testb00.jpg" alt="000" width="120" height="80" class="mini">
<img src="./image/th-testb01.jpg" alt="001" width="120" height="80" class="mini">
<img src="./image/th-testb02.jpg" alt="002" width="120" height="80" class="mini">
</div>
<div class="view">
<img src="" alt="Photo" class="big"><br>
<input type="button" value="<" class="bfo">
<input type="button" value=">" class="nxt">
</div>
</div>
<div class="imgbox">
<div class="imglist">
<img src="./image/th-testc00.jpg" alt="000" width="200" height="100" class="mini">
<img src="./image/th-testc01.jpg" alt="001" width="200" height="100" class="mini">
<img src="./image/th-testc02.jpg" alt="002" width="200" height="100" class="mini">
</div>
<div class="view">
<img src="" alt="Photo" class="big"><br>
<input type="button" value="<" class="bfo">
<input type="button" value=">" class="nxt">
</div>
</div>
<script>
document.body.onclick=hoge;
document.body.onmouseover=hoge2;
document.body.onmouseout=hoge3;
function hoge(e){
var n,q,p,o=e?event.target:event.srcElement;
if(o.className=='big'){ pclassSearch(o,'view').style.display='none'; return; }
if(o.className=='mini'){
if(!(p=sclassSearch(o.parentNode,'view'))) return;
p.style.display='block';
if(!(p=cclassSearch(p,'big'))) return;
var u=o.src.replace(/th-test/,'test');
p.src=u;
p.alt=u;
}
if(o.className=='bfo'){
q=sclassSearch(o,'big');if(!q) return;
n=q.src.match(/(\d*)\.jpg$/)[1]-1; if(n<0) return;
p=sclassSearch(o.parentNode,'imglist').getElementsByTagName('img')[n];
var u=p.src.replace(/th-test/,'test');
q.src=u;
q.alt=u;
}
if(o.className=='nxt'){
q=sclassSearch(o,'big');if(!q) return;
n=q.src.match(/(\d*)\.jpg$/)[1]-0+1;
p=sclassSearch(o.parentNode,'imglist').getElementsByTagName('img')[n];if(!p) return;
var u=p.src.replace(/th-test/,'test');
q.src=u;
q.alt=u;
}

}
function hoge2(e){
var o=e?event.target:event.srcElement,p =o.className;
if(p=='mini' || p=='big') o.style.border='2px #00f solid';
}
function hoge3(e){
var o=e?event.target:event.srcElement,p =o.className;
if(p=='mini' || p=='big') o.style.border='0px none';
}
function pclassSearch(o,c){while(o.className!=c)o=o.parentNode;return o;}
function sclassSearch(o,c){
var so=o.parentNode.firstChild;
while(so.className!=c) if(!(so=so.nextSibling)) return false; return so;
}
function cclassSearch(o,c){
var so=o.firstChild;
while(so.className!=c) if(!(so=so.nextSibling)) return false; return so;
}
</script>
</body>
お礼コメント
mmpopo

お礼率 80% (4/5)

イメージ通りのもので、思わず声を出して喜んでしまいました。

前回の回答も含め、まさかここまでしっかりとしたサンプルを書いていただけるとは思ってもみなかったので、本当に感激しています。

ソースを見ていろいろと試し、大まかにですが内容を把握することもできました。
後はページに上手く当てはめるために、なんとか自力でやっていきたいと思います。

重ね重ね本当にありがとうございました。
投稿日時 - 2008-09-14 21:20:10
Be MORE 7・12 OK-チップでイイコトはじまる

その他の回答 (全2件)

  • 回答No.2

良きサンプルとなるように作ったつもりですが、参考にならず残念です
私には、要望されたものを作る技量がないようです。それでは。
お礼コメント
mmpopo

お礼率 80% (4/5)

サンプルは今後、JavaScriptを学んでいく上でしっかりと活用させていただきます。
なかなか上手くいかずに困っていたところでしたので、このサンプルを機に他の方法も視野に入れて、
少しでも考えているものに近づけるよう、いろいろと試行錯誤を続けていこうと思います。

今回はご回答いただき、本当にありがとうございました。
投稿日時 - 2008-09-14 16:13:06
  • 回答No.1

<html>
<head>
<style>
.mini{ width:50px; height:50px; }
.hide{ display:none; }
#img99{ display:block; width:300px; height:300px;}
</style>
</head>
<body>
<div>
<img src="image/th-test1.jpg" id="img0" alt="photo1" class="mini">
<img src="image/th-test2.jpg" id="img1" alt="photo2" class="mini">
<img src="image/th-test3.jpg" id="img2" alt="photo3" class="mini">
</div>
<div id="v" class="hide">
<img id="img99" src="" alt="拡大写真">
<input type="button" id="bt0" value="前">
<input type="button" id="bt1" value="次">
<input type="button" id="bt2" value="×">
</div>
<script>
var nn,mx;
var imgs=[],imgb=[];
document.onclick = imgSwap;
window.onload=function(){
var pt='./img/';
var imgns = [ 'th-test1.jpg','th-test2.jpg','th-test3.jpg' ];
var imgnb = [ 'test1.jpg','test2.jpg','test3.jpg' ];
mx=imgns.length;
for(var i=0; i<mx;i++){
imgs[i]=new Image();imgs[i].src=pt+imgns[i];
imgb[i]=new Image();imgb[i].src=pt+imgnb[i];
document.getElementById('img'+i).src =imgs[i].src;
document.getElementById('img'+i).alt =imgs[i].src;
}
}
function imgSwap(e){
var o=e?e.target:event.srcElement;
if(o.id=='img99' || o.id=='bt2' ){
document.getElementById('v').style.display='none';
return;
}
if(o.id=='bt0' && !o.disabled) { if(0<nn) nn--;setImage(nn); return; }
if(o.id=='bt1' && !o.disabled) { if(mx>nn) nn++;setImage(nn); return; }

if(!o.className.match(/mini/)) return;
document.getElementById('v').style.display='block';
nn=o.id.match(/img(\d*)/)[1];
setImage(nn);
}
function setImage(n){
document.getElementById('img99').src = imgb[n].src;
document.getElementById('img99').alt = imgb[n].src;
document.getElementById('bt0').disabled = (n==0);
document.getElementById('bt1').disabled = (n==(mx-1));
}
</script>
</body></html>
補足コメント
mmpopo

お礼率 80% (4/5)

ご回答ありがとうございます。

さっそくこのソースを確認してみましたが、見た目はまさにこのような感じです。
しかし大変申し訳ないのですが、説明不足で意図が伝わっていませんでした。

やりたいことを具体的に説明しますと、
同一ページ上に複数のサムネイル欄を設け、
その欄ごとに画像を拡大縮小、進む戻るボタンを表示させたいと思っています。

画像のサイズもサムネイルのサイズもひとつひとつ違ったものにし、
新しい欄を容易に作ることのできるような可変的なもの、
出来ればhtml側で画像のサイズやURLが決めれたら、と考えています。

一つの外部javascriptから、複数の欄を制御できたら理想的なのですが、
そういったことは難しいのでしょうか。

このような感じで欄を複数設けたいと考えています。

-------------------html------------------------

1.------------------------------------------------------------------<br />

<a href="#" onclick="resizeImg('test1',300,300); imageSwap('test1','image/test1-1.jpg')">
<img src="image/th-test1-1.jpg" alt="" width="50" height="50" /></a>
<a href="#" onclick="resizeImg('test1',300,300); imageSwap('test1','image/test1-2.jpg')">
<img src="image/th-test1-2.jpg" alt="" width="50" height="50" /></a>
<a href="#" onclick="resizeImg('test1',300,300); imageSwap('test1','image/test1-3.jpg')">
<img src="image/th-test1-3.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><br />

2.------------------------------------------------------------------<br />

<a href="#" onclick="resizeImg('test2',500,500); imageSwap('test2','image/test2-1.jpg')">
<img src="image/th-test2-1.jpg" alt="" width="70" height="50" /></a>
<a href="#" onclick="resizeImg('test2',500,500); imageSwap('test2','image/test2-2.jpg')">
<img src="image/th-test2-2.jpg" alt="" width="70" height="50" /></a>
<a href="#" onclick="resizeImg('test2',500,500); imageSwap('test2','image/test2-3.jpg')">
<img src="image/th-test2-3.jpg" alt="" width="70" height="50" /></a>
<a href="#" onclick="resizeImg('test2',500,500); imageSwap('test2','image/test2-4.jpg')">
<img src="image/th-test2-4.jpg" alt="" width="70" height="50" /></a>

<br /><a href="#" onclick="resizeImg('test2',1,1); imageSwap('test2','image/kuuhaku.gif');">
<img name="test2" src="image/kuuhaku.gif" alt="" width="1" height="1" /></a><br />

3.------------------------------------------------------------------<br />

<a href="#" onclick="resizeImg('test3',500,300); imageSwap('test3','image/test3-1.jpg')">
<img src="image/th-test3-1.jpg" alt="" width="150" height="50" /></a>
<a href="#" onclick="resizeImg('test3',500,300); imageSwap('test3','image/test3-2.jpg')">
<img src="image/th-test3-2.jpg" alt="" width="150" height="50" /></a>

<br /><a href="#" onclick="resizeImg('test3',1,1); imageSwap('test3','image/kuuhaku.gif');">
<img name="test3" src="image/kuuhaku.gif" alt="" width="1" height="1" /></a><br />

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

よろしくお願いします。
投稿日時 - 2008-09-14 00:26:26
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
このQ&Aのテーマ

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する

特集


より良い社会へ。感謝経済プロジェクト始動

ピックアップ

ページ先頭へ