情報学部 菅沼ホーム 目次 索引

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">
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
	<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>

情報学部 菅沼ホーム 目次 索引