Image()

Imageオブジェクトの作成

2009.01.09

構文
オブジェクト名 = new Image()

説明

Imageオブジェクトでは，new演算子を使って画像をオブジェクト化できる。
このオブジェクト化された画像は，スクリプトを使って操作できる。

用例

「IMG[1]」から「IMG[5]」までの5個の画像オブジェクトを作成し，それぞれのオブジェクトに画像の「src」の値を設定した後，その画像オブジェクトをブラウザに表示した「animation」というオブジェクト名を付けたimg要素に，一定時間ごとに順番に読み込むことにより，画像をアニメーションさせる。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Image()</title>
<script type="text/javascript">
<!--
var ImageSetA = 1;
IMG = new Array();
  IMG[1] = new Image();
  IMG[2] = new Image();
  IMG[3] = new Image();
  IMG[4] = new Image();
  IMG[5] = new Image();
IMG[1].src = "image1.jpg";
IMG[2].src = "image2.jpg";
IMG[3].src = "image3.jpg";
IMG[4].src = "image4.jpg";
IMG[5].src = "image5.jpg";
function anime_1() {
  document.animation.src = IMG[ImageSetA].src;
  ImageSetA++;
  if(ImageSetA > 5) {
    ImageSetA = 1;
  }
  setTimeout("anime_1()",1000);
}
//-->
</script>
<style type="text/css">
<!--
body { background-color: #ffffff; }
-->
</style>
</head>
<body onLoad="anime_1()">
*Imageオブジェクトの作成
<p>
<img src="image1.jpg" name="animation" alt="Animation" border="0" 
width="100" height="100">
</p>
</body></html>