人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: sankakusan
●カテゴリ:コンピュータ
✍キーワード:chAngE HTML JavaScript SRC クリック
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● aki73ix
●15ポイント

http://tohoho.wakusei.ne.jp/js/index.htm

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

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

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

◎質問者からの返答

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

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

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


2 ● mizcreid
●15ポイント

http://tohoho.wakusei.ne.jp/www.htm

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

ご要望の処理は、

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

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

ことで実現可能です。

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

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

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

◎質問者からの返答

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


3 ● catv
●15ポイント

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

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

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

◎質問者からの返答

function change(){

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

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

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


4 ● Hyla
●20ポイント

http://www.myagency.jp/security/security/scurity09.html

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>


5 ● mizcreid
●20ポイント

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

はてな

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>

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ