
始めまして、初歩的な質問で申し訳ないのですが、よろしくお願いします。
『9枚の画像(サイズはすべて同じ)を4箇所(2×2)でフェードイン・フェードアウト、する様な形で表示させたい。』
(1) 複数の画像をランダムで表示させる事は以下のリンク等で確認出来ました。
http://logue.apricotte.net/2006/04/03-192500.php
(2) フェードイン・アウトは=<a http://iswebmag.hp.infoseek.co.jp/142/sample02.h …こちらを参考に出来ました。
※1箇所のみで出来ました!
2箇所以上だと、ダメです。
(1)だけだとフェード効果を得られません。
(2)は1箇所配置だけど動作しますが2箇所以上に配置だと動作しません。
(3)出来れば(1)のように画像を配置したい箇所に記述出来るソースがあれば幸いです。
以上、聞き苦しい点があると思いますが、よろしくお願いします。
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
こんにちは
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等)
フェードイン・アウトはあきらめ、4箇所でのランダム表示にしました。
4箇所のランダムも配置もブラウザによって位置調整するのが難しかったので、9枚の画像を【2枚×3箇所+3枚=9枚・4箇所】にしました。
(詳しく)
2枚の画像をランダム × 3箇所
3枚の画像をランダム × 1箇所
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
画像を入れ替えたい
-
OpenCVの実行エラー
-
ダイアログから画像ファイルは...
-
複数の画像をフェードイン・ア...
-
javaScriptでリンク画像のラン...
-
OpenCVで固定枠で画像を操作す...
-
MFCで画像を表示させているので...
-
pythonで、tkinterとpillowの組...
-
どの<li><a> が押されたか判別...
-
MAX関数を使ってからLEFT JOIN...
-
eclipseでcssを使うためには?
-
JavaScript - 月ごとに画像変化
-
1枚の画像をクリックすると複数...
-
画面が真っ白になるのはどうして?
-
iframe内のリンク文字のマウス...
-
floatさせたdivタグを折り返さ...
-
jspでcssが読み込めない
-
jqueryを使ってポップアップを...
-
<li></li>の数を制限
-
JAVAで画像をボタンで切り替え...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavaScriptで変更した属性の元...
-
複数画像のランダム複数表示(...
-
MFCで画像を表示させているので...
-
Vb.net2005での画像の合成方法
-
画像がうまく表示されないのですが
-
画像クリックで背景を変える
-
HTMLからimgのsrcのみを正規表...
-
html内にスライドショーを複数設置
-
条件分岐でキーが入力されてい...
-
ラズパイでno module named zbar
-
libjpegライブラリの使い方につ...
-
指定したセルに表示
-
画像ファイルをアップロードす...
-
マウスオーバー時に画像切り替え
-
Jquery load IEだと効かない?
-
javascriptでのパスについて
-
createElementによる空要素の生...
-
JavaScriptの記述方法
-
外部javascriptの重複を防ぐには
-
pythonのpygameでキャラクター...
おすすめ情報