画像のサイズを取得して特定の場所に表示

[ポイント]

• 画像情報を取得する
• 書き出すという処理の関数を作成する
• 関数を呼び出す場所を特定する

[ソースコード]

<form>
	<input type="button" name="get_width" value="画像の幅とを取得" onclick="getWidth()"/><!-- 関数呼び出し -->
	<input type="button" name="get_height" value="画像の高さを取得" onclick="getHeight()"/><!-- 関数呼び出し -->
</form>

<p>この画像の幅は<span id="haba_kekka"></span>pxです。そして高さは<span id="takasa_kekka"></span>pxです。</p>

<script type="text/JavaScript">
<!-- // 画像を読み込んでから初めて情報を取得できるので最後に書いている

	var myImage = document.getElementById('image'); // 画像にアクセスし変数に代入

	function getWidth(){ // haba_kekkaという場所に記述せよという関数
		document.getElementById('haba_kekka').innerHTML = myImage.width;
						}

	function getHeight(){ // takasa_kekkaという場所に記述せよという関数
		document.getElementById('takasa_kekka').innerHTML = myImage.height;
						}

//-->
</script>

インデックスページに戻る