画像切り替えボタンの作成方法

2023/08/08 06:57

このQ&Aのポイント

サムネイルをクリックするごとに、拡大画像が表示されるページを作成する方法について教えてください。
拡大された画像をクリックすると、サムネイルだけの状態に戻るようにする方法について教えてください。
進む、戻るボタンを含んだ画像切り替えページを作成する方法について教えてください。

ベストアンサー

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

2008/09/13 21:02

サムネイルをクリックするごとに、拡大画像がそれらの下に表示されるページを作っています。拡大された画像をクリックすると、再びサムネイルだけの状態に戻ります。そこで質問なのですが、拡大された状態の時に、次の画像に進むボタンと戻るボタンを表示させ、実際に切り替えることができ、サムネイルだけの状態の時にはボタンが表示されないといったものを作る場合、どういった様にすればいいのでしょうか。いろいろ試してはみたのですが、当方初心者ですのでなかなか動いてくれません。以下は進む、戻るボタン無しのソースです。 ---------------------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> ---------------------------------------------------- よろしくお願いします。

mmpopo
お礼率80% (4/5)

JavaScript
回答数3
ありがとう数2

みんなの回答 （3）
専門家の回答

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

ベストアンサー

noname#84373

2008/09/14 16:36 回答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>

質問者

お礼 2008/09/14 21:20

イメージ通りのもので、思わず声を出して喜んでしまいました。前回の回答も含め、まさかここまでしっかりとしたサンプルを書いていただけるとは思ってもみなかったので、本当に感激しています。ソースを見ていろいろと試し、大まかにですが内容を把握することもできました。後はページに上手く当てはめるために、なんとか自力でやっていきたいと思います。重ね重ね本当にありがとうございました。

その他の回答 (2)

noname#84373

2008/09/14 08:11 回答No.2

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

質問者

お礼 2008/09/14 16:13

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

noname#84373

2008/09/13 22:55 回答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>

質問者

補足 2008/09/14 00:26

ご回答ありがとうございます。さっそくこのソースを確認してみましたが、見た目はまさにこのような感じです。しかし大変申し訳ないのですが、説明不足で意図が伝わっていませんでした。やりたいことを具体的に説明しますと、同一ページ上に複数のサムネイル欄を設け、その欄ごとに画像を拡大縮小、進む戻るボタンを表示させたいと思っています。画像のサイズもサムネイルのサイズもひとつひとつ違ったものにし、新しい欄を容易に作ることのできるような可変的なもの、出来れば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 /> -------------------------------------------------------------------- よろしくお願いします。

関連するQ&A

画像の切り替え
教えてください。画像がはじめに1つ表示されていて、横にサムネイルが2つあり、サムネイルのマウスオーバーで、その画像が大きく表示され、マウスオーバーで、元の画像へと表示が戻り、サムネイルのクリックで、その画像が大きく表示されたまま固定となるということがしたいのですが、マウスオーバー、マウスアウトはとりあえず実装できたのですが、マウスクリックを実装しても、やはり、マウスアウトで画像が切り替わってしまいます。どうしたらいいのでしょうか？ <IMG src="images/a.jpg" id="display" name="display" width="100" height="100" border="0"> <a href="javascript:;" onClick="document.display.src='images/a.jpg'" onMouseOver="MM_swapImage('display','','images/item/a.jpg',1)" onMouseOut="MM_swapImgRestore()"> <IMG src="images/item/a.jpg" width="20" height="20" border="0" name="thumb1" id="thumb1"> </a> <a href="javascript:;" onMouseOver="MM_swapImage('display','','images/b.jpg',1)" onMouseOut="MM_swapImgRestore()" onClick="document.display.src='images/b.jpg'"> <IMG src="images/b.jpg" width="20" height="20" border="0" name="thumb2" id="thumb2"> </a> 以上よろしくお願いします。
- ベストアンサー
- JavaScript
JavaScriptの画像入れ替えについて
下記のようなものでサムネイルをクリックすると大きな画面に表示される、みたいなものを作っています。しかし職場のIE6でクリックすると表示されなく大きな画像が消えてしまいます。ちなみに自宅のIE６で確認したときは大丈夫だったのですが、、、またサムネイル画像のアンカー部分のjavasscript:void(0);を消すと表示されるようになるのですが、やはりここのvoid0には問題があるのでしょうか？？またサーバーにUPする前オンライン上ではなくPCで確認している時はちゃんと表示できていたました。あまり詳しくないものでどなたかよろしくお願い致します。 <script type="text/javascript">  </script> <style type="text/css"> img { border:none; } </style> </head> <body> <img src="image/2.jpg" width="500" height="500" id="image" /> <a href="javascript:void(0);"><img src="image/2.jpg" width="50" height="50" onClick="imgch(this.src)" ></a> <a href="javascript:void(0);"><img src="image/3.jpg" width="50" height="50" onClick="imgch(this.src)" ></a> <a href="javascript:void(0);"><img src="image/3.jpg" width="50" height="50" onClick="imgch(this.src)" ></a> </body>
- ベストアンサー
- JavaScript
マウスオーバーで画像の入れ替え
以下のソースでマウスオーバー時に画像の入れ替えをしたいのですが、IE6では動作するのですが、firefoxでは動作しません。 firefoxでも動くようにするにはどうしたらいいですか？アドバイスよろしくお願いいたします。 <html> <head> <script language="JavaScript">  </script> </head> <body> <div class="btn"><a href="#"><img src="img/sample1.jpg" onmouseover="SwapImage('img/test01.jpg')" width="100" height="50" border="0" /></a></div> <div class="btn"><a href="#"><img src="img/sample2.jpg" onmouseover="SwapImage('img/test02.jpg')" width="100" height="50" border="0" /></a></div> <div class="btn"><a href="#"><img src="img/sample3.jpg" onmouseover="SwapImage('img/test03.jpg')" width="100" height="50" border="0" /></a></div> <div id="photo"><img src="img/default.gif" name="image" width="300px" height="150px"></div> </body> </html>
- ベストアンサー
- JavaScript
二重の画像切り替え
以下のようなJavaScriptを作りたいと考えております。非常にレベルの低い内容で申し訳ないのですが、どうかみなさんの知恵を貸していただけば幸いです。（ちなみにJavaScriptで処理品ければいけない成約がありますので、他の方法は今回はすみません。）見せるのも恥ずかしいレベルのソースですが、ソースも載せます。ＣのいずれかをクリックするとＢの３つのサムネイル画像がすべて切替り、更にＢのいずれかをクリックすると拡大画像のＡが切替るJavaScriptを作りたいと考えております。 ┌──┐ │拡大│←Ａ（Ｂの拡大画像） └──┘ ┌─┐┌─┐┌─┐ │前││横││後│←Ｂ（車の各方向からの写真画像） └─┘└─┘└─┘ ┌─┐┌─┐┌─┐ │赤││青││黒│←Ｃ（車のカラーバリエーション） └─┘└─┘└─┘ ◆◆◆現在のソース◆◆◆ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js"></script>  <div id="main_img"><img id="target_main" src="images/red_head.jpg" width="450" height="190" alt="image"></div>  <div class="thumbnail"> <ul> <li><a href="images/red_head.jpg"><img id="target_thumbnail_01" src="images/red_head.jpg" width="100" height="41" alt="gold_01"></a></li> <li><a href="images/red_side.jpg"><img id="target_thumbnail_02" src="images/red_side.jpg" width="100" height="41" alt="gold_02"></a></li> <li><a href="images/red_back.jpg"><img id="target_thumbnail_03" src="images/red_back.jpg" width="100" height="41" alt="gold_03"></a></li> </ul> </div>  <div class="color"> 　　<ul> 　　　　<li><a href="○○○"><img src="images/wheat.jpg" width="78" height="26" alt="sample01"></a></li> <li><a href="○○○"><img src="images/images/java.jpg" width="78" height="26" alt="sample01"></a></li> <li><a href="○○○"><img src="images/images/graphite.jpg" width="78" height="26" alt="sample01"></a></li> </ul> </div>  <script type="text/javascript"> $(document).ready( function() { $(".thumbnail a").click( function() { var changeSrc = $(this).attr("href"); $("#target_main").fadeOut("slow", function() { $(this).attr("src", changeSrc); $(this).fadeIn(); } ); return false; }); }); </script>  　・　・　・
- 締切済み
- JavaScript
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; } ------------------------------------------ よろしくお願いします。
- 締切済み
- JavaScript
画像切り替え
<div> <img src="image1" alt="" width="300" height="300" /><br /> <img src="image1" alt="" width="80" height="80" /> <img src="image2" alt="" width="80" height="80" /> <img src="image3" alt="" width="80" height="80" /> <div> 下の小さい画像にマウスが乗ったら、上の大きい画像に表示させたいのですが、どのように組んだらよろしいでしょうか、よろしくお願いいたします。
- ベストアンサー
- JavaScript
「戻る」「進む」ボタンで画像を変えるには？
「戻る」「進む」ボタンで5枚の画像を変えられるようにしたいのですが、なかなかできません。順番が飛んでしまったりしてしまいます。 var n=0; var imgDB=new Array("kenkyu/0.jpg","kenkyu/1.jpg","kenkyu/2.jpg","kenkyu/3.jpg","kenkyu/4.jpg"); function change(){ if(n==0)n=4; if(n==5)n=0; document.img.src=imgDB[n]; } <TABLE cellpadding="10" bgcolor="#0099cc"> <TBODY> <TR> <TD><IMG src="kenkyu/0.jpg" name="img" width="500" height="400" border="0"></TD> </TR> </TBODY> </TABLE> <A href=JavaScript:n--;change();><IMG src="kenkyu/modoru.jpg" width="96" height="28" border="0"></A>　 <A href=JavaScript:n++;change();><IMG src="kenkyu/susumu.jpg" width="96" height="28" border="0"></A><BR> 分かる方、教えて下さい。よろしくお願い致します。
- ベストアンサー
- JavaScript
changeImgによる画像の入れ替え時のIEにおける不安定さ
changeImgで画像を入れ替えたいのですが、 FireFoxでは問題ないのですが、 IEだと、画像が表示されない、半分だけ表示される、等の現象が発生してしまいます。表示されないときに右クリックの画像を表示するにすると表示されます。 http://inoue.sub.jp/test/ ソースは ************************** function changeImg(iName,img){ document.images[iName].src=img; } ************************** <img height="344" border="0" width="230" name="tar01" id="tar01" alt="" src="img/01.jpg"/> <a onclick="changeImg('tar01','img/01.jpg');" onmouseout="changeImg('tar02','img/07.jpg')" onmouseover="changeImg('tar02','img/08.jpg');" href="javascript:void(0);"> <img height="83" border="0" width="50" name="tar02" id="tar02" alt="" src="img/07.jpg"/></a> <a onclick="changeImg('tar01','img/02.jpg');" onmouseout="changeImg('tar03','img/09.jpg')" onmouseover="changeImg('tar03','img/10.jpg');" href="javascript:void(0);"> <img height="83" border="0" width="50" name="tar03" id="tar03" alt="" src="img/09.jpg" class="pl5"/></a> になります。何処がおかしいのでしょうか？どうぞよろしくお願いいたします。
- 締切済み
- JavaScript
文字サイズ変更ボタンでサイズが思うように制御できません
文字サイズ変更ボタンを配置して、下記のhtmlで大中小に変えられるようにしています。 <div><a id="fsize_l" onclick="document.body.style.fontSize='130%'" href="javascript:void(0);"><img src="../../images/b_fsize_l.jpg" alt="文字サイズ　大" width="85" height="25" /></a></div> <div><a id="fsize_m" onclick="document.body.style.fontSize='100%'" href="javascript:void(0);"><img src="../../images/b_fsize_m.jpg" alt="文字サイズ　中" width="19" height="25" /></a></div> <div><a id="fsize_s" onclick="document.body.style.fontSize='70%'" href="javascript:void(0);"><img src="../../images/b_fsize_s.jpg" alt="文字サイズ　小" width="29" height="25" /></a></div> 元々の文字サイズは％で制御しているのですが、大→中（＝標準）に戻した時、元々のサイズとは異なるサイズになってしまいます。どうしてでしょうか？標準サイズを100％とし、中サイズも100％と記述しています。
- ベストアンサー
- HTML
onClickで指定した以外の画像も変わってしまう
Youtubeの動画をボタンを使って切り替えるように設定しています。＝＝＝＝＝＝＝＝＝＝ Youtube動画表示＝＝＝＝＝＝＝＝＝＝ボタン１　ボタン２　ボタン３という感じで配列しています。ボタン１～３は、それぞれ同じ画像で表示しています。 btn.png：OFF時 btn_on.png：ON時 Javascriptは下記のように書いています。＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ function change(obj){ var orgimg="img/btn.png"; var newimg="img/btn_on.png"; var imgs=document.getElementsByTagName('img') for(var i=0;i<imgs.length;i++){ if(imgs[i].className==obj.className){ if(imgs[i]==obj) imgs[i].src=newimg; else imgs[i].src=orgimg; } } }; ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ボタン部分はそれぞれ下記のようにしています。＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <a href="http://www.youtube.com/watch?v=1111111" onclick="return Obj.replaceObject(this.href);"><img src="img/btn_on.png" width="16" height="15" border="0" alt="movie 1" onClick="change(this)"></a> <a href="http://www.youtube.com/watch?v=2222222" onclick="return Obj.replaceObject(this.href);"><img src="img/btn.png" width="16" height="15" border="0" alt="movie 2" onClick="change(this)"></a> <a href="http://www.youtube.com/watch?v=3333333" onclick="return Obj.replaceObject(this.href);"><img src="img/btn.png" width="16" height="15" border="0" alt="movie 3" onClick="change(this)"></a> ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝これでちゃんとクリックしたボタンのみがON時の画像になり、それ以外はOFF時の画像に戻るのですが同ページ上に表示している全く関係ない画像（例えばタイトル画像やバナー等）が何故かOFF時の画像が拡大された状態のもの（タイトルやバナーで指定してあるサイズ）に切り替わってしまいます。 CSSで背景に指定してある画像やボタン設定してある画像は大丈夫なのですが普通にHTML上に指定してあるJPGやPNG画像が変わってしまいます。。。どこかおかしな部分があると思うのですがわからず途方にくれております。何方か教えて下さい。どうぞ宜しくお願いします。
- ベストアンサー
- JavaScript

画像切り替えボタンの作成方法

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