画像を切り替えるプログラムの方法と画像枚数の拡張について
- html上に表示させた画像をクリックして切り替えるプログラムを作成したいが、正しく動作しない。
- 画像の枚数が増えた場合にコードを増やさずに対応する方法を知りたい。
- document.getElementById()を使用して画像を切り替える方法も知りたい。
- ベストアンサー
画像切り替える&画像何千枚でもコード増やさない方法
html上に表示させた画像をクリックすると、画像を切り替えるプログラムを作りたいのですが、 うまく動作しません。 １つ目の質問は、 document.images[]の方法もありますが、正しくなく互換がないそうなので使いたくありません。 document.getElementById()で画像を切り替えるにはどうしたらいいのでしょうか？ ２つ目の質問ですが、 このプログラムは6枚の画像が切換えの対象になっていますが、 これが300枚とかになるとプログラムが増えて大変です。 GAZO[0] = new Image(50,50); GAZO[0].src = "0.jpg"; という風にしているところを var GAZO = new Array(); for(n=0; n<6; n++){ GAZO[n] = new Image(50,50); GAZO[n].src = "n.jpg"; } という風にすればできると思ったのですが、できませんでした。 n.jpgが""で囲まれて変数のnがただの文字列と見られているのかもと思い、 'GAZO[n] = new Image(50,50); GAZO[n].src = '+'"'+n+'.jpg'+'"'; このようにしてみましたがダメでした。 画像の枚数が何千枚になってもプログラムが増えない方法はありますか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <script type="text/javascript"> <!-- var Bifor = new Array(); Bifor[0] = new Image(50,50); Bifor[0].src = "befor0.jpg"; Bifor[1] = new Image(50,50); Bifor[1].src = "befor1.jpg"; Bifor[2] = new Image(50,50); Bifor[2].src = "befor2.jpg"; Bifor[3] = new Image(50,50); Bifor[3].src = "befor3.jpg"; Bifor[4] = new Image(50,50); Bifor[4].src = "befor4.jpg"; Bifor[5] = new Image(50,50); Bifor[5].src = "befor5.jpg"; function first(){ for(i=0; i<6; i++){ 'document.getElementById("after' + i + '").src' = Bifor[i].src; } } var GAZO = new Array(); GAZO[0] = new Image(50,50); GAZO[0].src = "0.jpg"; GAZO[1] = new Image(50,50); GAZO[1].src = "1.jpg"; GAZO[2] = new Image(50,50); GAZO[2].src = "2.jpg"; GAZO[3] = new Image(50,50); GAZO[3].src = "3.jpg"; GAZO[4] = new Image(50,50); GAZO[4].src = "4.jpg"; GAZO[5] = new Image(50,50); GAZO[5].src = "5.jpg"; function change(m){ 'document.getElementById("after' + m + '").src' = GAZO[m].src; } //--> </script> </head> <body onload="first()"> <form name="jirei" action="#"> //actionは必須。しかしに他に入れるものがないので便利な#を入れる <GAZO src="title.jpg"> <table> <tr> <td><img src="befor0.jpg" width="50" height="50" id="after0" onclick="change(0)"></td> <td><img src="befor1.jpg" width="50" height="50" id="after1" onclick="change(1)"></td> <td><img src="befor2.jpg" width="50" height="50" id="after2" onclick="change(2)"></td> </tr> <tr> <td><img src="befor3.jpg" width="50" height="50" id="after3" onclick="change(3)"></td> <td><img src="befor4.jpg" width="50" height="50" id="after4" onclick="change(4)"></td> <td><img src="befor5.jpg" width="50" height="50" id="after5" onclick="change(5)"></td> </tr> </table> <input type="button" value="元に戻す" onclick="first()"> </form> </body> </html>
- tekkenman7
- お礼率70% (150/212)
- JavaScript
- 回答数6
- ありがとう数2
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
そうそう、ためしていませんが もとのこーどをこうしてはどうだろう？ function first () { for (var i = 0; i < 6; i++) document.getElementById ('after' + i).src = Bifor[i].src; } function change (m) { document.getElementById ('after' + m).src = GAZO[m].src; }
その他の回答 (5)
- babu_baboo
- ベストアンサー率51% (268/525)
> 画像何千枚でも これをすくりぷとでよみこむの？ たいへんそうなので、さきよみはしていません。 なぜなら、みるひとが、そのたびになんぜんまいものがぞうをみるとはおもわないから。 onload を、つかわずにすくりぷとをさいごにもってくるとおなじようになるよ。 ここのがぞうにとりつけた onclick いべんとは、おやである document で、かんしできます くりっくしたようそが、img だったら、おやのようそで、id が TOGGLE_IMAGE のものをさがします もし、そのこどもならがぞうの .src を、てぬきですがこうかんしてます。 <!DOCTYPE html><title></title> <style type="text/css">#TOGGLE_IMAGE td > img {width:50px;height:50px}</style> <table id="TOGGLE_IMAGE"> <tr> <td><img src="befor0.jpg" alt="a"> <td><img src="befor1.jpg" alt="b"> <td><img src="befor2.jpg" alt="c"> <tr> <td><img src="befor3.jpg" alt="d"> <td><img src="befor4.jpg" alt="e"> <td><img src="befor5.jpg" alt="f"> </table> <script> //@cc_on @set @v = @_jscript_version var a=function (b){return function(c){ var d=c./*@if(1)srcElement@else@*/target/*@end@*/,e; if('IMG'==d.nodeName) if(b(d,'id','TOGGLE_IMAGE')) if(e=d.getAttribute('src'/*@,2@*/).match(/^(.+?)(\d+\.jpg)$/)) d.src=(e[1]=='befor'?'after':'befor')+e[2]; }}(function(a,b,c){return a?c==a[b]?a:arguments.callee(a.parentNode,b,c):''}); document./*@if(@v<5.9)attachEvent('on'+@else@*/addEventListener(/*@end@*/'click',a,false); </script>
- reggaepunc
- ベストアンサー率59% (64/108)
>var target = document.getElementById('target'); >でtargetにdocument.getElementById('target');を入れて、 > >target = target.getElementsByTagName('img');で >targetにtarget.getElementsByTagName('img');を入れ直しているのですが、 > >最初のtarget = document.getElementById('target');は、 >target.getElementsByTagName('img');のtargetに入るのですか？ >つまり、 >target = document.getElementById('target').getElementsByTagName('img'); >という風になっているのですか？ ↑はい。そういう書き方もできますね。
- shiren2
- ベストアンサー率47% (139/295)
この簡単なサンプルで動作確認出来てますから(Firefox v4, Chromium v11)、画像が正しくあるか、構文エラーが出てないかなどを確かめてみてください。 <script> GAZO = new Array(); for(n=0; n<10; n++){ GAZO[n] = new Image(50,50); GAZO[n].src = n + ".jpg"; document.write('<p><img src="' + GAZO[n].src + '" /></p>'); } </script>
- shiren2
- ベストアンサー率47% (139/295)
これで通りませんか。 for(n=0; n<300; n++){ GAZO[n] = new Image(50,50); GAZO[n].src = n + ".jpg"; }
- reggaepunc
- ベストアンサー率59% (64/108)
取り急ぎ、こんか感じでいかがでしょう。 ---------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> </head> <body> <form name="jirei" action="#"> //actionは必須。しかしに他に入れるものがないので便利な#を入れる <GAZO src="title.jpg"> <table id="target"> <tr> <td><img src="befor0.jpg" width="50" height="50" id="after0" onclick="change(0)"></td> <td><img src="befor1.jpg" width="50" height="50" id="after1" onclick="change(1)"></td> <td><img src="befor2.jpg" width="50" height="50" id="after2" onclick="change(2)"></td> </tr> <tr> <td><img src="befor3.jpg" width="50" height="50" id="after3" onclick="change(3)"></td> <td><img src="befor4.jpg" width="50" height="50" id="after4" onclick="change(4)"></td> <td><img src="befor5.jpg" width="50" height="50" id="after5" onclick="change(5)"></td> </tr> </table> <input type="button" value="元に戻す" onclick="first()"> </form> <script type="text/javascript"> <!-- /** 定義 */ var target = document.getElementById('target'); target = target.getElementsByTagName('img');// imgタグをすべて取得 var GAZO = new Array(); GAZO.push( "0.jpg" ); GAZO.push( "1.jpg" ); GAZO.push( "2.jpg" ); function change( m ) { target[m].src = GAZO[m]; } //--> </script> </body> </html> ----------------------------------------
お礼
var target = document.getElementById('target'); でtargetにdocument.getElementById('target');を入れて、 target = target.getElementsByTagName('img');で targetにtarget.getElementsByTagName('img');を入れ直しているのですが、 最初のtarget = document.getElementById('target');は、 target.getElementsByTagName('img');のtargetに入るのですか？ つまり、 target = document.getElementById('target').getElementsByTagName('img'); という風になっているのですか？
関連するQ&A
- 「戻る」「進む」ボタンで画像を変えるには？
「戻る」「進む」ボタンで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
- 画像のロールオーバー
画像のロールオーバーで下記のスクリプトを教えてもらいました。 画像aをマウスオーバーで画像a2に変わる クリックでオーバーした状態を保持（画像a2のまま） さらに、画像bをマウスオーバーで画像b2に変わり クリックでオーバーした状態を保持（画像b2のまま） そのクリック時、画像a2が画像aに変わる 実装できたのですが。 下記のソース２つテーブルが１つのhtml上にあり a～fまでg～iまで画像が分かれていて a～fをクリックし画像が変わった後 g～iをクリックするとa～fの画像が変わらないようにしたいのです。 二つのテーブルの画像を別々に考えたいのですが、できますでしょうか？ よろしくお願いします。 <html> <head> <style type="text/css"> <!-- img.group {width: 111px; height:50px;} --> </style> <script type="text/javascript"><!-- var img=['a.jpg,a2.jpg','b.jpg,b2.jpg','c.jpg,c2.jpg','d.jpg,d2.jpg','e.jpg,e2.jpg','f.jpg,f2.jpg','g.jpg,g2.jpg','h.jpg,h2.jpg','i.jpg,i2.jpg']; var elm=[]; var o_idx=-1; window.onload=function(){ var e=document.getElementsByTagName('IMG'); for (var i=0,j=0; i<e.length; i++) if (e[i].className=='group1') elm[j++]=e[i]; for (i=0; i<elm.length; i++){ elm[i].onmouseover=change(i,1); elm[i].onmouseout=change(i,0); elm[i].onclick=change(i,2); } } function change(idx,n){ return function(){ if (n > 1){ if (o_idx > -1) elm[o_idx].src=img[o_idx].split(',')[0]; elm[idx].src=img[idx].split(',')[1]; o_idx=idx; } else { if (idx != o_idx) elm[idx].src=img[idx].split(',')[n]; } };} // --></script> </head> <body> <table width="676" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="111"><img src="a.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="b.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="c.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="d.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="e.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="f.jpg" width="111" height="50" border="0" class="group1"></td> </tr> </table> <br> <table width="333" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="111"><img src="g.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="h.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="i.jpg" width="111" height="50" border="0" class="group1"></td> </tr> </table> </body> </html>
- ベストアンサー
- JavaScript
- テーブルで画像を並べるときに・・
今ホームページをつくっていて 幅600pxのロゴ(jpg画像)の下に幅280px,80px,80px,80px,80px画像を並べています。 全部の画像をぴったりくっつけたいんですが、上のロゴと下の5つ並んだ画像の間に1pxくらいの隙間が出来てしまいます。 ソースは <table width="600" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="5"> <img src="img/title.jpg" width="600" border="0"> </td> </tr> <tr> <td> <img src="img/1.jpg" width="280"height="35" border="0"> </td> <td> <img src="img/2.jpg" width="80" height="35" border="0"> </td> <td> <img src="img/3.jpg" width="80" height="35" border="0"> </td> <td> <img src="img/4.jpg" width="80" height="35" border="0"> </td> <td> <img src="img/5.jpg" width="80" height="35" border="0"> </td> </tr> </table> http://web-channel.com/index.html このホームページのようにしたいんですがどこを直したらいいんでしょうか？ 環境は、WinMEでエディタにタグ打ち込んで作ってます。
- ベストアンサー
- HTML
- mozilla で画像が見れません。
HP制作の初心者です。 基本的な質問かと思いますがよろしくお願いします。 FFFTPを使って、画像をアップしたいのですが、IEでは見れるのに、Mozillaでは見れません。 どうしてでしょうか。 <td width="25%"><img src="C:\Program Files\citclejpg/aaa.jpg" width="150" height="120"></td> <td width="25%"><img src="C:\Program Files\citclejpg/aaa2.jpg" width="150" height="120"></td> <td width="25%"><img src="C:\Program Files\citclejpg/aaa3.jpg" width="150" height="120"></td> <td width="25%"><img src="C:\Program Files\citclejpg/aaa4.gif" width="150" height="120"></td> といった感じです。 よろしくお願いします。
- ベストアンサー
- HTML
- htmlの画像表記を教えて下さい
画像を一列に表記したいと思って下記の様にしましたが、一番左は画像が出ますが、他はHTMLの文字が表記されます。 正しい方法を教えてください。 <TABLE border="0" width="800"> <TBODY> <TR><TD><IMG src="http://lib.shopping.srv.yimg.jp/lib/○○○/img-3.jpg" width="150" height="103"></TD> <td>IMG src="http://lib.shopping.srv.yimg.jp/lib/○○○/img-4.jpg" width="150" height="103"</td> <td>IMG src="http://lib.shopping.srv.yimg.jp/lib/○○○/img-6.jpg" width="150" height="103"</td> <td>IMG src="http://lib.shopping.srv.yimg.jp/lib/○○○/img-2.jpg" width="150" height="103"</td> <td>IMG src="http://lib.shopping.srv.yimg.jp/lib/○○○/img-5.jpg" width="150" height="103"</td> </tr> </TBODY></TABLE>
- ベストアンサー
- その他(Windows)
- JPEG写真がアップロードされない
多分、超基本的な質問です。 ビルダーを使っています。 ３つのフレームと３枚の写真がありますが 一番左の写真（image5.jpg）だけがアップロードされません。 同じように処理した＜つもり＞ですが、なにが 原因なのでしょうか。 タグを記しますのでご指摘ください。 <TD width="237"><IMG src="image5.jpg" border="0" width="247" height="205"></TD> <TD></TD> <TD></TD> <TD></TD> <TD width="237"><IMG src="image.jpg" border="0" width="247" height="205"align="middle"></TD> <TD></TD> <TD></TD> <TD></TD> <TD width="283"><IMG src="image1.jpg" border="0" width="250" height="202"></TD>
- ベストアンサー
- ホームページ作成ソフト
- IEでimages[...]のエラーになる原因は？
下記プログラムをIETesterで開くと、 このページのスクリプトでエラーが発生しました。 文字： 3 エラー： 'document.images[...]'はNullまたはオブジェクトではありません コード： 0 というエラーメッセーが出てしまいます。 Firefoxだと正常に動いたのですが、 document.images[i].srcというのは、IEで対応していないということでしょうか？ それか、そもそもこういった書き方は間違いでしょうか？ <script language="JavaScript"> <!-- rrr = new Image(200,100); rrr.src = "sample.jpg"; function sss(){ document.fff.nnn.value=""; ppp.innerHTML = "" for(var i=1; i<=30; i++){ document.images[i].src = rrr.src; : : : : : //--> </script> </head> <body onload="sss()"> <form name="fff"> <img src="title.jpg"> <div id="nnn"></div> <table> <tr> <td><img src="a.jpg" width="200" height="100" onclick="yyy(1)"></td> <td><img src="a.jpg" width="200" height="100" onclick="yyy(2)"></td> <td><img src="a.jpg" width="200" height="100" onclick="yyy(3)"></td>
- ベストアンサー
- JavaScript
- 助けてください＞＜IE上で1pxのズレ
こんにちわ。 組んだテーブルに謎の１ｐｘがはいってしまいます。 ファイヤーフォックスでは正常なのですがIEでは1pxの隙間ができてしまうようで。 どなたか分かる方いらっしゃたらお願いします＞＜ <table width="660" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2" valign="top"> <img src="img/test_01.jpg" width="660" height="177" alt=""></td> </tr> <tr><td rowspan="2" valign="top"> <table width="316" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2"> <img src="img/test_02.jpg" width="316" height="46" alt=""></td> </tr> <tr> <td> <img src="img/test_05.jpg" width="144" height="47" alt=""></td> <td> <img src="img/test_06.jpg" width="172" height="47" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_08.jpg" width="316" height="169" alt=""></td> </tr> </table> </td></tr> <tr><td valign="top"> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr><td> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="img/test_03.jpg" width="181" height="62" alt=""></td> <td> <img src="img/test_04.jpg" width="163" height="62" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_07.jpg" width="344" height="83" alt=""></td> </tr> </table> </td></tr> <tr><td> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="img/test_09.jpg" width="160" height="62" alt=""></td> <td> <img src="img/test_10.jpg" width="184" height="62" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_11.jpg" width="344" height="23" alt=""></td> </tr> <tr> <td> <img src="img/test_12.jpg" width="160" height="32" alt=""></td> <td> <img src="img/test_13.jpg" width="184" height="32" alt=""></td> </tr> </table> </td></tr> </table> </td></tr> <tr><td colspan="2"> <table width="660" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="5"> <img src="img/test_14.jpg" width="660" height="141" alt=""></td> </tr> <tr> <td> <img src="img/test_15.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_16.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_17.jpg" width="140" height="150" alt=""></td> <td> <img src="img/test_18.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_19.jpg" width="130" height="150" alt=""></td> </tr> <tr> <td colspan="5"> <img src="img/test_20.jpg" width="660" height="40" alt=""></td> </tr> </table> </td></tr> </table>
- 締切済み
- HTML
- javascriptを使い、サムネイル表示
サンプルＨＰ⇒http://cartown.jp/detail_dt.php?car_id=1990056 のような、サムネイル画像と拡大画像を表示させる記述方法を 教えてください。 下記のような回答文を確認したのですが、img要素を列挙する記述やonclickイベントを結びつける記述すらわかりません。こんな超初心者ですが、よろしくお願い致します。 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ <html> <head> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>サンプル</title> <script type="text/javascript"> function showImg(){ document.getElementById("image").src=this.src; } function setup(){ var thumbnails=document.getElementsByName("thumbnail");//name="thumbnail"とついているimg要素を列挙 for(var i=0;i<thumbnails.length;i++)thumbnails[i].onclick=showImg;//↑で列挙したものにonclickイベントを結びつける } window.onload=setup; </script> <style type="text/css"> .main td{ width:300px; height:300px; } </style> </head> <body> <table border class="main"> <tr> <td><img id="image" width="300" height="300"></td> <td> 文章 </td> </tr> </table> <!--ここから下の画像はサムネイル用ではなく、上に表示する予定の画像と同じもので width属性とheight属性を指定して大きさを変えています。(ここでは全部300x300の画像とします。)--> <table border> <tr> <td><img name="thumbnail" src="img1.png" width="48" height="48"></td> <td><img name="thumbnail" src="img2.png" width="48" height="48"></td> <td><img name="thumbnail" src="img3.png" width="48" height="48"></td> <td><img name="thumbnail" src="img4.png" width="48" height="48"></td> <td><img name="thumbnail" src="img5.png" width="48" height="48"></td> </tr> <tr> <td><img name="thumbnail" src="img6.png" width="48" height="48"></td> <td><img name="thumbnail" src="img7.png" width="48" height="48"></td> <td><img name="thumbnail" src="img8.png" width="48" height="48"></td> <td><img name="thumbnail" src="img9.png" width="48" height="48"></td> <td><img name="thumbnail" src="img10.png" width="48" height="48"></td> </tr> </table> サムネイルクリックで拡大します。 </body> </html>
- 締切済み
- JavaScript
- HTML CSS 表示画像のサイズ
表示画像のサイズについて。元の画像サイズはばらばらです。 初歩的な質問ですがよろしくお願いします。 <tr> <td><img src="images/A.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> <tr> <td><img src="images/B.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> <tr> <td><img src="images/C焼.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> これをCSSで書く場合なのですが、 img{ width：100 height：100 border：2 } としたのですが、うまくいきません。なぜでしょうか？
- ベストアンサー
- HTML
お礼
ダメでした。読み込めませんでした。