みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

画像切り替える&画像何千枚でもコード増やさない方法

html上に表示させた画像をクリックすると、画像を切り替えるプログラムを作りたいのですが、
うまく動作しません。

1つ目の質問は、
document.images[]の方法もありますが、正しくなく互換がないそうなので使いたくありません。
document.getElementById()で画像を切り替えるにはどうしたらいいのでしょうか?

2つ目の質問ですが、
このプログラムは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>

投稿日時 - 2011-05-08 02:00:59

QNo.6721852

すぐに回答ほしいです

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

そうそう、ためしていませんが
もとのこーどをこうしてはどうだろう?

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

投稿日時 - 2011-05-09 00:23:05

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(6)

ANo.5

> 画像何千枚でも
これをすくりぷとでよみこむの?
たいへんそうなので、さきよみはしていません。
なぜなら、みるひとが、そのたびになんぜんまいものがぞうをみるとはおもわないから。

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>

投稿日時 - 2011-05-09 00:00:01

ANo.4

>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');
>という風になっているのですか?

↑はい。そういう書き方もできますね。

投稿日時 - 2011-05-08 21:06:48

ANo.3

この簡単なサンプルで動作確認出来てますから(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>

投稿日時 - 2011-05-08 20:41:34

ANo.2

これで通りませんか。

for(n=0; n<300; n++){
GAZO[n] = new Image(50,50);
GAZO[n].src = n + ".jpg";
}

投稿日時 - 2011-05-08 09:11:33

お礼

ダメでした。読み込めませんでした。

投稿日時 - 2011-05-08 15:40:48

ANo.1

取り急ぎ、こんか感じでいかがでしょう。
----------------------------------------
<!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>
----------------------------------------

投稿日時 - 2011-05-08 05:31:19

お礼

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');
という風になっているのですか?

投稿日時 - 2011-05-08 15:31:54

あなたにオススメの質問