まだ素人なので教えてください。
function change()に引数を使って分岐させて OnClickで別々の値を入れるか
一方の関数を change2とか、名前を変えてコピーしてはいかがですか?
change()は多分、外部関数ですから、名前は何でもいいんですよ
Web関連のリファレンスと解説ならここが一番わかりやすいかと思います。
ご要望の処理は、
・imgタグにid属性を持たせる
・Functionに引数(id属性の指定)を持たせる
ことで実現可能です。
どちらも上記URLで調べられます。
「JavaScriptリファレンス」から、
「関数(Function)」「エレメント(Element)」あたりを見てみてください。
ありがとうございます。まったくまだ素人なので、具体的に教えていただけるとありがたいです。imgタグにid属性を持たせる方法やFunctionに引数(id属性の指定)を持たせる方法、それが別々のスライドを動かす方法にどうつながるのかこのサイトを見て理解できるほどまだ慣れてないのです。ごめんなさい。まだみようみまねの段階です。
http://www.hatena.ne.jp/1081303445#
同一html内で、javascriptのfunction change()で二つの写真スライド(img src)をクリックで別々にスライドさせたい場合、どうしたらよいのでしょうか。二つの要素に対して同.. - 人力検索はてな
img のnameを変えてあげて、change関数でそのnameごとに呼び出し指定をしてあげるというのはいかがでしょうか。
function change(){
document.-----.src=images[i++].src;
という方法で-----の部分がnameの部分ですよね。
今現在この方法で試してますがやっぱりうまくいきませんでした。自分の書いた他の部分が間違っているかもしれません。他にも意見を伺いたいと思います。ありがとうございました。
URLはダミーです。
スライドとはちょっとちがうかもしれませんけど、こんな感じではいかがでしょうか。
<html>
<head>
<script language=”JavaScript”><!--
count = 0;
data = new Array(”img_1.gif”,”img_2.gif”);
prImg= new Array();
for (i=0; i<data.length; i++)
{
prImg[i] = new Image();
prImg[i].src = data[i];
}
function change()
{
count++;
count %= data.length;
document.myIMG.src = data[count];
status = count;
}
// --></script>
</head>
<body>
<a href=”javaScript:nextImg()”>
<img src=”img.gif” name=”myIMG”>
</a>
</body>
</html>
大変ありがとうございます。これはあらかじめ用意された一枚のhtmlファイル上では有効なようですね。実は最初の質問では省いてしまいましたが、Movable Typeのエントリーの中にスライドを実行するスクリプトを記述したくて質問させてもらいました。ブログのアーカイブ上で記事がたまっていくと、スライド記事が複数列記されていくことになります。そうなった場合の対処方法を伺いたいと思います。
ブログのエントリー内にスクリプトを記述する方法はとりあえず置いといて、
次の記述方法で書く場合、どの部分を変更すれば、複数のスライドが列記された場合別々に実行可能になりますか?
それとも根本的にこれでは無理なのでしょうか。
<head>
<script language=”JavaScript”></p> <p> <!--</p> <p> imgnum=9;</p> <p> images=new Array();</p> <p> for(i=1; i<=imgnum; i++){</p> <p> images[i]=new Image();</p> <p> images[i].src=”ファイル名”+i+”.jpg”;</p> <p> }</p> <p> </p> <p> j=2;</p> <p> function change(){</p> <p> document.jonnobi.src=images[j++].src;</p> <p> if(j>=10){ j=1;}</p> <p> }</p> <p> // --></p> <p> </script>
</head>
<body>
</body>
URLはダミーです。
より具体的にというご希望でしたので、改めて回答いたします。
例えば、スクリプトを以下のように作ります。
<script type=”text/javascript”>
<!--
image_max = 2; // imgタグの個数
frame_max = 4; // スライドの枚数
image_src = new Array(8);
// 画像のsrcリスト(スライドで使用する画像)
image_src[0] = ”hoge1.jpg”;
image_src[1] = ”hoge2.jpg”;
image_src[2] = ”hoge3.jpg”;
image_src[3] = ”hoge4.jpg”;
image_src[4] = ”hoge5.jpg”;
image_src[5] = ”hoge6.jpg”;
image_src[6] = ”hoge7.jpg”;
image_src[7] = ”hoge8.jpg”;
for (i = 0; i < image_src.length; i++) {
tmp_img = new Image();
tmp_img.src = image_src[i];
}
// スライドの順序を制御する配列
image_no = new Array(image_max);
image_list = new Array(image_max);
for (i = 0; i < image_no.length; i++) {
image_no[i] = 0;
image_list[i] = new Array(frame_max);
}
// img0に表示する画像リスト
// 代入する番号はsrcリストの番号
image_list[0][0] = 0; // img0で1番目に表示する画像
image_list[0][1] = 1; // img0で2番目に表示する画像
image_list[0][2] = 2; // img0で3番目に表示する画像
image_list[0][3] = 3; // img0で4番目に表示する画像
// img1に表示する画像リスト
image_list[1][0] = 4; // img1で1番目に表示する画像
image_list[1][1] = 5; // img1で2番目に表示する画像
image_list[1][2] = 6; // img1で3番目に表示する画像
image_list[1][3] = 7; // img1で4番目に表示する画像
// スライド実行関数
function change(id){
id_name = ”img” + id;
document.images[id].src=image_src[image_list[id][image_no[id]++]];
}
// -->
</script>
HTMLは以下のようになります。
<img id=”img0” onclick=”change(0)” src=”start1.jpg”>
<img id=”img1” onclick=”change(1)” src=”start2.jpg”>
image_maxの値を変更することで、スライドがいくつあっても別々に動かせます。
frame_maxはスライドの枚数ですが、全スライドで共通になっています。
image_src[n]には画像のURLを指定します。
image_list[id][m]はスライドの順番を定義する配列です。
idはどのスライドかを意味し、mはコマ(何枚目の画像か)を意味します。
こんな例でいかがでしょうか。
失礼しました、一つ前のHylaさんに対する返答にmizcreidさんへの返答を書き込んでしまいました。
Hylaさん、その方法も一つの手段として参考にさせていただきます。わざわざ書いていただいてありがとうございました
mizcreidさん、
大変ありがとうございます。これはあらかじめ用意された一枚のhtmlファイル上では有効なようですね。実は最初の質問では省いてしまいましたが、Movable Typeのエントリーの中にスライドを実行するスクリプトを記述したくて質問させてもらいました。ブログのアーカイブ上で記事がたまっていくと、スライド記事が複数列記されていくことになります。そうなった場合の対処方法を伺いたいと思います。
ブログのエントリー内にスクリプトを記述する方法はとりあえず置いといて、
次の記述方法で書く場合、どの部分を変更すれば、複数のスライドが列記された場合別々に実行可能になりますか?
それとも根本的にこれでは無理なのでしょうか。
<head>
<script language=”JavaScript”></p> <p> <!--</p> <p> imgnum=9;</p> <p> images=new Array();</p> <p> for(i=1; i<=imgnum; i++){</p> <p> images[i]=new Image();</p> <p> images[i].src=”ファイル名”+i+”.jpg”;</p> <p> }</p> <p> </p> <p> j=2;</p> <p> function change(){</p> <p> document.jonnobi.src=images[j++].src;</p> <p> if(j>=10){ j=1;}</p> <p> }</p> <p> // --></p> <p> </script>
</head>
<body>
</body>
なるほど。問題はとりあえずのところ解決しました。
ありがとうございました。
後学のために他の方法も聞いてみたいと思います。