Java-Script

　花火もどき－４？　いろんなものが飛びます。　6^^) 　　　　　

Sample

ソース

<HTML><HEAD>
<TITLE>Java-Script</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- 
var xpos0=0;var ypos0=0;
n=30;
var _width = 400;
var _height = 400;
var _width = screen.width*1/5;
var _height= screen.height*1/3;
xpos0 = _width+5; 
ypos0 =  _height;
xpos=new Array();
ypos=new Array();
i=new Array();
l=new Array();
dot=new Array();
for (m=1;m<(n+1);m++){
  xpos[m] = _width+10*Math.random(); 
  ypos[m] = _height-10*Math.random();
  i[m]=xpos[m]-xpos0;
  l[m]=ypos[m]-ypos0;
}
timeID=0;
function hanabi() {
  for (m=1;m<(n+1);m++){
    document.all["dot["+m+"]"].style.pixelTop = ypos[m];
    document.all["dot["+m+"]"].style.pixelLeft = xpos[m];
    xpos[m]=xpos[m]+i[m];
    ypos[m]=ypos[m]+l[m];
    l[m]=l[m]+0.1;
    if ((xpos[m]<=5)||(ypos[m]<=5)){
      xpos[m] = _width+10*Math.random(); 
      ypos[m] = _height-10*Math.random();
      i[m]=xpos[m]-xpos0;
      l[m]=ypos[m]-ypos0;
    }
    else if ((xpos[m]>=screen.width*5/10)||(ypos[m]>=screen.height*6/10)){
      xpos[m] = _width+10*Math.random(); 
      ypos[m] = _height-10*Math.random();
      i[m]=xpos[m]-xpos0;
      l[m]=ypos[m]-ypos0;
    }
  }
  timeID=setTimeout("hanabi()",1);
}
//-->
</SCRIPT>
</HEAD>
<body bgcolor=white onLoad="hanabi()">
<SCRIPT LANGUAGE="JavaScript">
<!--
for (m=1;m<(n+1);m++){
  img_name="bk_img1.gif";
  if (m<23) {img_name = 'bk_img2.gif';}
  if (m<12) {img_name = 'bk_img3.gif';}
  if (m<3) {img_name = 'bk_img4.gif';}
  if (m<2) {img_name = 'bk_img5.gif';}
  document.write("<div id=\"dot["+ m +"]\" style=\"POSITION: absolute; Z-INDEX: "
+ m +" VISIBILITY: visible; TOP: 10px; LEFT: 10px; width:1;\"><img src="
 + img_name + "></div>");
}
//-->
</SCRIPT>
<FORM>
<INPUT Type=button VALUE="ウインドウを閉じる" onClick=window.close()>
</FORM>
</BODY>
</HTML>

ワンポイント解説

花火もどき－３までは、テキスト（キャラクター）を飛ばしていましたが、今回はイメージ (gifファイル) を飛ばしてみました。
ソ－スファイルの
<body bgcolor=white onLoad="hanabi()">
<SCRIPT LANGUAGE="JavaScript">
<!--
for (m=1;m<(n+1);m++){
img_name="bk_img1.gif";
if (m<23) {img_name = 'bk_img2.gif';}
if (m<12) {img_name = 'bk_img3.gif';}
if (m<3) {img_name = 'bk_img4.gif';}
if (m<2) {img_name = 'bk_img5.gif';}
document.write("<div id=\"dot["+ m +"]\" style=\"POSITION: absolute; Z-INDEX: "
+ m +" VISIBILITY: visible; TOP: 10px; LEFT: 10px; width:1;\"><img src="
+ img_name + "></div>");
}

の個所になります。