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

[ポイント]

[ソースコード]

<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>


この画像の幅はpxです。そして高さはpxです。

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