複数の画像をフェードイン・アウトでランダム表示したい。 出来れば、画像がカブらない様にしたい。

質問

始めまして、初歩的な質問で申し訳ないのですが、よろしくお願いします。

『９枚の画像（サイズはすべて同じ）を４箇所（２×２）でフェードイン・フェードアウト、する様な形で表示させたい。』

(1)　複数の画像をランダムで表示させる事は以下のリンク等で確認出来ました。
http://logue.apricotte.net/2006/04/03-192500.php

(2)　フェードイン・アウトは＝<a http://iswebmag.hp.infoseek.co.jp/142/sample02.htmlこちらを参考に出来ました。
※１箇所のみで出来ました！

２箇所以上だと、ダメです。

(1)だけだとフェード効果を得られません。
(2)は１箇所配置だけど動作しますが２箇所以上に配置だと動作しません。

(3)出来れば(1)のように画像を配置したい箇所に記述出来るソースがあれば幸いです。

以上、聞き苦しい点があると思いますが、よろしくお願いします。

回答No.1

leap_day

こんにちは

9枚の内ランダムで1枚づつ選んで4箇所に配置してフェードインですか？
こんな感じでできますが・・・(同一画像を読み込んでしまうのでその部分は他のスクリプトを使ってください）

<script language="javascript">
<!--
img = new Array();

img[0] = "sample0.gif";
img[1] = "sample1.gif";
img[2] = "sample2.gif";
img[3] = "sample3.gif";
img[4] = "sample4.gif";
img[5] = "sample5.gif";
img[6] = "sample6.gif";
img[7] = "sample7.gif";
img[8] = "sample8.gif";

spd = 50; // 変化させる間隔（ミリ秒単位）
ntc = 2; // 何%ずつ変化させるか
cnt = 0;

window.onload = function() {
n1 = Math.floor(Math.random()*img.length);
document.images['ia'].src = img[n1];
n2 = Math.floor(Math.random()*img.length);
document.images['ib'].src = img[n2];
n3 = Math.floor(Math.random()*img.length);
document.images['ic'].src = img[n3];
n4 = Math.floor(Math.random()*img.length);
document.images['id'].src = img[n4];

fdInImg();
}

function fdInImg() {
document.images['ia'].filters['alpha'].opacity = cnt;
document.images['ib'].filters['alpha'].opacity = cnt;
document.images['ic'].filters['alpha'].opacity = cnt;
document.images['id'].filters['alpha'].opacity = cnt;
cnt += ntc;
if(cnt >= 100) return;
setTimeout("fdInImg()",spd);
}
//-->
</script>
<img src="" name="ia" alt="ia" border="0" style="filter:alpha(opacity=0);">
<img src="" name="ib" alt="ib" border="0" style="filter:alpha(opacity=0);">
<img src="" name="ic" alt="ic" border="0" style="filter:alpha(opacity=0);">
<img src="" name="id" alt="id" border="0" style="filter:alpha(opacity=0);">

しかしながらfilterはIE専用の機能なので他のブラウザではフェードインできないことをあらかじめご了承ください

質問文を読み返してて何か勘違いしてる気もしないではないですが・・・
もし1箇所で9枚をランダムフェードイン・アウトするのが4箇所であるならばそれぞれの場所についてスクリプトを作ればいけそうだと思います（＾＾）

お礼

返信遅くなり、大変申し訳ありません。

回答通り、IE意外のブラウザやmacではフェードイン・アウトしないと言われました。（Mozilla等）

フェードイン・アウトはあきらめ、４箇所でのランダム表示にしました。

４箇所のランダムも配置もブラウザによって位置調整するのが難しかったので、９枚の画像を【２枚×３箇所＋３枚＝９枚・４箇所】にしました。

（詳しく）
２枚の画像をランダム　×　３箇所
３枚の画像をランダム　×　１箇所

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