- ベストアンサー
画像を切り替えるプログラムの方法と画像枚数の拡張について
- html上に表示させた画像をクリックして切り替えるプログラムを作成したいが、正しく動作しない。
- 画像の枚数が増えた場合にコードを増やさずに対応する方法を知りたい。
- document.getElementById()を使用して画像を切り替える方法も知りたい。
- 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'); という風になっているのですか？
お礼
ダメでした。読み込めませんでした。