
始めまして、初歩的な質問で申し訳ないのですが、よろしくお願いします。
『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で質問しましょう!
似たような質問が見つかりました
- PowerPoint(パワーポイント) パワーポイント アニメーション効果で、テキストと同時に画像を表示させる方法を教えてください 2 2022/09/12 21:06
- Visual Basic(VBA) エクセルマクロでアニメを作る方法を教えてください。 1 2023/02/07 14:27
- 防犯カメラ・監視カメラ・小型カメラ VHSを高画質な動画ファイルにしたいです。 3 2022/05/06 12:08
- Visual Basic(VBA) Powerpointでランダムな数字の結果を表示するマクロ 2 2023/08/04 10:04
- ホームページ作成・プログラミング CGIが実行可能なHP領域又はレンタルサーバーでおすすめの所を教えてください 現在ホームページ領域の 1 2023/01/01 11:47
- Excel(エクセル) エクセル、画像ファイル名の書かれたセル(複数個所)に画像を一括で表示させる方法 1 2023/04/19 00:19
- HTML・CSS 画像が分割されて切り替わる、ループアニメーションが作りたい 7 2023/05/27 17:12
- Windows 10 フォルダ内の全ての画像を矢印キーでスライドできるようにしたい 1 2022/10/21 12:53
- その他(IT・Webサービス) PCを立ち上げ時いつも同じ画像が出ます(トラブル発生、終了) 2 2022/04/23 12:46
- Illustrator(イラストレーター) 印刷プレビューに画像が表示されない 3 2022/09/06 14:34
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
複数の画像をフェードイン・ア...
-
OpenCVの実行エラー
-
複数画像のランダム複数表示(...
-
リンク先を動的に変更する
-
画像を入れ替えたい
-
HTMLからimgのsrcのみを正規表...
-
pythonのpygameでキャラクター...
-
ワイルドカード部分を置換時に...
-
JavaScriptで変更した属性の元...
-
条件分岐でキーが入力されてい...
-
JSPでの画像ファイル表示
-
eclipseでcssを使うためには?
-
iframe内のリンクが飛ばないの...
-
スクロール可能なチェックボックス
-
<li></li>の数を制限
-
textareaに画像を表示したい
-
タブ切り替えの初期表示について
-
クリックすると隠れたテキスト...
-
MAX関数を使ってからLEFT JOIN...
-
WEBページ立ち上げ時に1回のみ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavaScriptで変更した属性の元...
-
複数画像のランダム複数表示(...
-
MFCで画像を表示させているので...
-
Vb.net2005での画像の合成方法
-
画像がうまく表示されないのですが
-
画像クリックで背景を変える
-
HTMLからimgのsrcのみを正規表...
-
html内にスライドショーを複数設置
-
条件分岐でキーが入力されてい...
-
ラズパイでno module named zbar
-
libjpegライブラリの使い方につ...
-
指定したセルに表示
-
画像ファイルをアップロードす...
-
マウスオーバー時に画像切り替え
-
Jquery load IEだと効かない?
-
javascriptでのパスについて
-
createElementによる空要素の生...
-
JavaScriptの記述方法
-
外部javascriptの重複を防ぐには
-
pythonのpygameでキャラクター...
おすすめ情報