途中で画像を変更する

Imageオブジェクト

ねーちゃんの下のボタンをクリックしてみてください。


Netscape 3.0のJavaScriptでは一度ロードした画像を別の画像で置き換える ことができるようになりました。 画像をJavaScriptから参照するために<IMG>タグにNAME="..."をつけておきます。 すると、JavaScriptからはImageオブジェクトとして扱かうことができるようになります。

ボタンをクリックして呼ばれる関数flip()の中でこのImageオブジェクトの srcアトリビュートを変更することで画像を不機嫌なねーちゃんから恐いおじさん に替えています。画像には、imgという名前をつけましたから、

document.img.src = "img/yaasan.gif"
のように代入します。
ソース

<HEAD>
<SCRIPT>
var bool = false
function flip() {
	if (bool) {
		document.img.src = "img/ruugya.gif";
	} else {
		document.img.src = "img/yassan.gif";
	}
	bool = !bool
}
</SCRIPT>
</HEAD>

<IMG SRC="img/ruugya.gif" NAME="img" BORDER="1">
<FORM>
<INPUT TYPE="button" onClick="flip()" VALUE="Click here">
</FORM>

表示する画像を後から変更することはできるのですが、大きさを変えることは できません。違う大きさの画像を指定すると同じ大きさになるように拡大・縮小 されます。ですから使う画像の大きさを揃えておくとよいでしょう。