途中で画像を変更する

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>

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