同一html内で、javascriptのfunction change()で二つの写真スライド(img src)をクリックで別々にスライドさせたい場合、どうしたらよいのでしょうか。二つの要素に対して同じfunction change()を実行するとどっちかの要素だけしか実行されません。

まだ素人なので教えてください。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2004/04/07 11:04:05
  • 終了:--

回答(5件)

id:aki73ix No.1

aki73ix回答回数5224ベストアンサー獲得回数272004/04/07 11:15:00

ポイント15pt

function change()に引数を使って分岐させて OnClickで別々の値を入れるか

一方の関数を change2とか、名前を変えてコピーしてはいかがですか?

change()は多分、外部関数ですから、名前は何でもいいんですよ

id:sankakusan

なるほど。問題はとりあえずのところ解決しました。

ありがとうございました。

後学のために他の方法も聞いてみたいと思います。

2004/04/07 11:38:22
id:mizcreid No.2

mizcreid回答回数2ベストアンサー獲得回数02004/04/07 11:43:58

ポイント15pt

Web関連のリファレンスと解説ならここが一番わかりやすいかと思います。

ご要望の処理は、

・imgタグにid属性を持たせる

・Functionに引数(id属性の指定)を持たせる

ことで実現可能です。

どちらも上記URLで調べられます。

「JavaScriptリファレンス」から、

「関数(Function)」「エレメント(Element)」あたりを見てみてください。

id:sankakusan

ありがとうございます。まったくまだ素人なので、具体的に教えていただけるとありがたいです。imgタグにid属性を持たせる方法やFunctionに引数(id属性の指定)を持たせる方法、それが別々のスライドを動かす方法にどうつながるのかこのサイトを見て理解できるほどまだ慣れてないのです。ごめんなさい。まだみようみまねの段階です。

2004/04/07 12:02:49
id:catv No.3

catv回答回数103ベストアンサー獲得回数02004/04/07 11:45:24

ポイント15pt

http://www.hatena.ne.jp/1081303445#

同一html内で、javascriptのfunction change()で二つの写真スライド(img src)をクリックで別々にスライドさせたい場合、どうしたらよいのでしょうか。二つの要素に対して同.. - 人力検索はてな

img のnameを変えてあげて、change関数でそのnameごとに呼び出し指定をしてあげるというのはいかがでしょうか。

id:sankakusan

function change(){

document.-----.src=images[i++].src;

という方法で-----の部分がnameの部分ですよね。

今現在この方法で試してますがやっぱりうまくいきませんでした。自分の書いた他の部分が間違っているかもしれません。他にも意見を伺いたいと思います。ありがとうございました。

2004/04/07 13:07:10
id:Hyla No.4

Hyla回答回数20ベストアンサー獲得回数02004/04/07 14:06:09

ポイント20pt

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>

id:sankakusan

大変ありがとうございます。これはあらかじめ用意された一枚の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>

2004/04/07 14:55:31
id:mizcreid No.5

mizcreid回答回数2ベストアンサー獲得回数02004/04/07 14:06:41

ポイント20pt

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はコマ(何枚目の画像か)を意味します。

こんな例でいかがでしょうか。

id:sankakusan

失礼しました、一つ前の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>

2004/04/07 15:00:24
  • id:mizcreid
    同時に二つのスライドを動かすスクリプト

    続けて回答しようと思ったのですが、二回までしか回答できないんですね(^^;
    解決したなら良いのですが・・・。
    まだハマッているようなら回答いたしますのでご連絡ください。
    http://d.hatena.ne.jp/mizcreid/20040407

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません