- ベストアンサー
画像切り替えボタンの作成方法
- サムネイルをクリックするごとに、拡大画像が表示されるページを作成する方法について教えてください。
- 拡大された画像をクリックすると、サムネイルだけの状態に戻るようにする方法について教えてください。
- 進む、戻るボタンを含んだ画像切り替えページを作成する方法について教えてください。
- mmpopo
- お礼率80% (4/5)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （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>
その他の回答 (2)
良きサンプルとなるように作ったつもりですが、参考にならず残念です 私には、要望されたものを作る技量がないようです。それでは。
お礼
サンプルは今後、JavaScriptを学んでいく上でしっかりと活用させていただきます。 なかなか上手くいかずに困っていたところでしたので、このサンプルを機に他の方法も視野に入れて、 少しでも考えているものに近づけるよう、いろいろと試行錯誤を続けていこうと思います。 今回はご回答いただき、本当にありがとうございました。
<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>
補足
ご回答ありがとうございます。 さっそくこのソースを確認してみましたが、見た目はまさにこのような感じです。 しかし大変申し訳ないのですが、説明不足で意図が伝わっていませんでした。 やりたいことを具体的に説明しますと、 同一ページ上に複数のサムネイル欄を設け、 その欄ごとに画像を拡大縮小、進む戻るボタンを表示させたいと思っています。 画像のサイズもサムネイルのサイズもひとつひとつ違ったものにし、 新しい欄を容易に作ることのできるような可変的なもの、 出来れば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 /> -------------------------------------------------------------------- よろしくお願いします。
お礼
イメージ通りのもので、思わず声を出して喜んでしまいました。 前回の回答も含め、まさかここまでしっかりとしたサンプルを書いていただけるとは思ってもみなかったので、本当に感激しています。 ソースを見ていろいろと試し、大まかにですが内容を把握することもできました。 後はページに上手く当てはめるために、なんとか自力でやっていきたいと思います。 重ね重ね本当にありがとうございました。