静岡理工科大学 菅沼ホーム JavaScript 目次 索引

image オブジェクト

[機能]

  画像の処理.新しい画像は,以下のような方法で生成可能である.

x = new Image(横幅, 縦幅);

[プロパティ]

  1. document.images  画像が入っている配列
  2. document.{画像名 | images[index]}.border  画像の枠の太さ
  3. document.{画像名 | images[index]}.complete  画像が完全に読み込まれると true となる
  4. document.{画像名 | images[index]}.height  画像の高さ
  5. document.{画像名 | images[index]}.hspace  画像とテキスト間の横幅
  6. document.{画像名 | images[index]}.name  画像名
  7. document.{画像名 | images[index]}.src  画像ファイルの URL
  8. document.{画像名 | images[index]}.vspace  画像とテキスト間の縦幅
  9. document.{画像名 | images[index]}.width  画像の幅

[使用例]

  1. プログラム(下がそのソースコード)は,イメージオブジェクトのプロパティを示している.

    <!DOCTYPE HTML>
    <HTML>
    <HEAD>
    	<TITLE>image</TITLE>
    	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
    	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
    </HEAD>
    <BODY CLASS="white">
    	<H1 STYLE="text-align: center">イメージのプロパティ</H1>
    	<P STYLE="text-align: center"><IMG SRC="fig1.jpg" NAME="fig"></P>
    	<SCRIPT TYPE="text/javascript">
    		if (document.fig.complete || navigator.appName.indexOf("Explorer") >= 0) {
    			document.writeln("<DL>");
    			document.writeln("<DT>画像の枠の太さ: " + document.fig.border);
    			document.writeln("<DT>画像の高さ: " + document.fig.height);
    			document.writeln("<DT>画像の幅: " + document.fig.width);
    			document.writeln("<DT>画像とテキスト間の縦幅: " + document.fig.vspace);
    			document.writeln("<DT>画像とテキスト間の横幅: " + document.fig.hspace);
    			document.writeln("<DT>画像の URL: " + document.fig.src);
    			document.writeln("<DT>画像名: " + document.fig.name);
    			document.writeln("<DT>画像読み込み: " + document.fig.complete);
    			document.writeln("<P>以下の例では,配列 images を使用している.</P>");
    			document.writeln("<DT>画像の枠の太さ: " + document.images[0].border);
    			document.writeln("<DT>画像の高さ: " + document.images[0].height);
    			document.writeln("<DT>画像の幅: " + document.images[0].width);
    			document.writeln("<DT>画像とテキスト間の縦幅: " + document.images[0].vspace);
    			document.writeln("<DT>画像とテキスト間の横幅: " + document.images[0].hspace);
    			document.writeln("<DT>画像のアドレス: " + document.images[0].src);
    			document.writeln("<DT>画像読み込み: " + document.images[0].complete);
    			document.writeln("</DL>");
    		}
    	</SCRIPT>
    </BODY>
    </HTML>
    			

静岡理工科大学 菅沼ホーム JavaScript 目次 索引