降る上る6■画像D■ 複数画像の花が散るサイズ指定 -sna WORLD-    最終修正日 : 2016/03/30

●2016/03/30:即時関数で囲んで、グローバル変数を消しました。
複数種類の画像の花が降るJavaScriptです。
流れる画像のサイズをJavaScriptのソースの中で個別に指定できます。
実寸が同じような大きさの画像の場合、サイズ指定を変化させることで、大小の画像を降らせることができます。
文章の上に画像が散るか、文章の下に隠れるか(←この見本では隠れる)の指定も選択できます。
原本の作者はアルバム作成のフリーソフト『すなねぃる』の方。
原本の降る画像は1種類です。原本はこちらから。

■降る画像が実寸サイズのJavaScriptはこちら → 降る上る5■画像D■複数画像の花が散る -sna WORLD-


ご質問があったので、別ディレクトリにある画像のファイル指定の方法を説明します。
基本として、
var ha=new Array();
ha[0]="sa2.png";
ha[1]="sa2.png";
ha[2]="sa4.png";
を簡略化した指定方法が、下記になります。上も下も同じ意味です。
var ha=["sa2.png","sa2.png","sa4.png"];

1.画像が同じディレクトリの「image」というフォルダーに入っている場合は
var ha=["image/sa2.png","image/sa2.png","image/sa4.png"];
2.その「image」フォルダーが、一つ上のディレクトリにある場合は
var ha=["../image/sa2.png","../image/sa2.png","../image/sa4.png"];と指定します。

今回は、別ディレクトリにある画像を指定しやすいように
「var myurl=""; //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分」を付けました。


3.これを使って指定する場合、2のパターンでは
var ha=["sa2.png","sa2.png","sa4.png"];
var myurl="../image/";
と指定することもできます。

4.ディレクトリの位置がよく把握できない場合は絶対位置指定で指定することもできます。
2のパターンで指定する場合は、
var ha=["http://oekakirenn.webcrow.jp/image/sa2.png","http://oekakirenn.webcrow.jp/image/sa2.png","http://oekakirenn.webcrow.jp/image/sa4.png"];
3のパターンで指定する場合は、
var ha=["sa2.png","sa2.png","sa4.png"];
var myurl="http://oekakirenn.webcrow.jp/image/";
という指定方法になります。

なお、1や2のパターンで記述した場合は、「myurl」には何も記述せず、「var myurl="";」のままにして下さい。
ここにも「var myurl="../image/";」を記述したり、「var myurl="";」を削除したりするとエラーになります。
「var myurl="../image/";」を記述するのは、画像が別フォルダに入っているのに「var ha=[〜〜]」のところに「"sa2.png"」等の画像名のみを記述した場合だけです。



sa2.png

sa4.png
私の作成した
背景透過png。
右クリックで
どうぞ。
原本の古いブラウザ対応を削除し、複数画像指定に変更。