イメージ（Image）

イメージオブジェクトを生成します。width, height は省略可能で、画像の横幅、高さを指定します。後に必要となる画像データをあらかじめキャッシュに読み込んでおく際などに用いられます。

<script type="text/javascript">
<!--
function init() {
   img1 = new Image(100, 100);
   img1.src = "xxx.gif";
}
// -->
</script>
    :
<body onload="init()">

images はこのドキュメントに含まれるイメージ（画像）オブジェクトの配列、length はその個数を示します。個々のイメージオブジェクトは images[n] や images[name] で参照します。

<script type="text/javascript">
<!--
function func() {
    for (i = 0; i < document.images.length; i++) {
        img = document.images[i];
        alert(img.src);
    }
    img = document.images["XYZ"];
    alert(img.src);
}
// -->
<img src="xxx.gif" name="XYZ" alt="XXX">

それぞれ、<img> タグの画像ファイル（src）、名前（name）、横幅（width）、高さ（height）、横方向の余白（hspace）、縦方向の余白（vspace）、ボーダーの太さ（border）、読み込み中に表示する低解像度画像ファイル（lowsrc）属性に対応する値を示します。

src に画像の URL を設定することにより、表示されている画像を変更することができます。さらに Internet Explorer では、width や height などにも値を設定して大きさなどを変更することができます。

<script type="text/javascript">
<!--
if (document.images) {
    img1 = new Image();       // キャッシュに hidari.gif を
    img1.src = "hidari.gif";  // 読みこませておく。
}
function setImage(name, src) {
    if (document.images) {
        document.images[name].src = src;
    }
}
// -->
</script>
<img name="img1" src="migi.gif" alt="xxx">
<form action="#">
<input type="button" value="右"
          onclick="setImage('img1', 'migi.gif')">
<input type="button" value="左"
          onclick="setImage('img1', 'hidari.gif')">
</form>

イメージ（Image）

■ 一覧

■ イメージオブジェクト