見出し画像
Photo by golchiki

【JavaScript】画像操作

関野泰宏


画像オブジェクト

Image       画像オブジェクト

画像を扱うオブジェクトです


例

mImg = new Image()
mImageを画像オブジェクトとする

サンプル
<html>
<head>
<title>サンプル</title>
<script language="JavaScript">
<!--

mImage = new Image();
mImage.src = "000.jpg";

//-->
</script>
</head>
<body>
<h2>画像オブジェクト</h2>
<img src="111.jpg" name="img" width="32" height="32"><br />
<a href="#" onmouseover="img.src='222.jpg'" onmouseout="img.src='444.jpg'">マウスを乗せると表示する</a>

</body>
</html>
​


画像の枠幅

border     枠幅

画像の枠を返します

例

alert("枠幅は" + document.mPhoto.border + "です")
mPhotoという名前の画像の枠幅をアラートダイアログに表示する

alert("枠幅は" + document.image[2].border + "です")
3番目の画像の枠幅をアラートダイアログに表示する

サンプル
<html>
<head>
<title>サンプル</title>
</head>
<body>
<h2>画像の枠幅</h2>
<a href=""><img src="000.jpg" name="img" border="1"></a><br />
<a href="#" onmouseover="alert(img.border)">枠幅表示</a><br />
</body>
</html>
​


画像の読み込み状態

complete       読み込み完了状態画像が完全に読み込まれたかどうかを返します

例

alert(document.mPhoto.complete)
mPhotoという名前の画像の読み込み完了状態を表示する

alert(document.images[4].complete)
5番目の画像の読み込み完了状態を表示する

サンプル

<html>
<head>
<title>サンプル</title>
</head>
<body>
<h2>画像の読み込み状態</h2>
<img src="000.jpg" name="img">----
<img src="111.jpg" name="img2"><br />
<a href="#" onmouseover="alert(img.complete)">左の画像状態表示</a><br />
<a href="#" onmouseover="alert(img2.complete)">右の画像状態表示</a><br />
</body>
</html>


画像の縦横幅

height     縦幅
width      横幅

画像の縦、横の幅を返します


例

alert(document.mPhoto.width)
mPhotoという名前の画像の横幅アラートダイアログに表示する

wd = document.Images[0].height
一番最初の画像の横幅を変数wdに代入する

document.myChar.width = 256
画像名mCharの横幅256ピクセルにする

サンプル
<html>
<head>
<title>サンプル</title>
</head>
<body>
<h2>画像の縦横幅</h2>
<img src="000.jpg" name="img" width="48" height="32"><br />
<a href="#" onmouseover="alert(img.width)">横幅表示</a><br />
<a href="#" onmouseover="alert(img.height)">縦幅表示</a><br />
</body>
</html>

​


画像と文字の間隔

hspace        文字との縦の問題
vspace        文字との横の問題

画像と文字との間隔の縦、横を返します。

例

alert(document.mPhoto.vspace)
mPhotoという名前の画像と文字との横幅を表示する

alert(document.mPhoto.hspace)
mPhotoという名前の画像と文字との縦幅を表示する


サンプル
<html>
<head>
<title>サンプル</title>
</head>
<body>
<h2>画像と文字の間隔</h2>
<img src="000.jpg" name="img" hspace="12" vspace="8"><br />
<a href="#" onmouseover="alert(img.hspace)">横間幅表示</a><br />
<a href="#" onmouseover="alert(img.vspace)">縦間幅表示</a><br />
</body>
</html>


画像名/画像数

length      画像数
name        画像名

画像の総数、名前を返します

例

num = document.images.length
画像総数を変数numに代入する

fName = document.images[0].name
最初の画像の名前を変数fNameに代入する


サンプル

<html>
<head>
<title>サンプル</title>
</head>
<body>
<h2>画像名/画像数</h2>
<img src="000.jpg">
<img src="001.jpg">
<img src="002.jpg">
<img src="003.jpg">
<br />
<a href="#" onmouseover="alert(document.images.length)">画像総数</a>
</body>
</html>



画像アドレス

lowsrc      低解像度画像URL
src         画像URL

画像のアドレス(URL)を読み出し/書き込みます

例

mImg = new Image()
mImg.src = "000.jpg"
"000.jpg"画像プレロードを行う

tURL = document.mPhoto.src
mPhotoという名前の画像アドレス(URL)を変数tURLに代入


サンプル

<html>
<head>
<title>サンプル</title>
</head>
<body>
<h2>画像アドレス</h2>
<img src="000.jpg" lowsrc="001.jpg" name="img" width="32" height="12"><br />
<a href="#" onmouseover="alert(img.lowsrc)">lowsrcアドレス表示</a><br />
<a href="#" onmouseover="alert(img.src)">srcアドレス表示</a>
</body>
</html>


イベント設定

onabort      読み込み中断時
onerror      読み込みエラー発生時
onload       読み込み完了時

画像に対して発生したイベントを設定します

例

document.mImg.onbort = abortFunc
mImgという名前の画像の読み古中断したときの処理先をaboutFuncにする

dcoument.mImg.onerror = errFunc
mImgという名前の画像の読み込みエラー時の処理先をerrFuncにする

document.mImg.onload = oadFunc
mImgという名前の画像の読み込み完了時の処理先をloadFuncにする


サンプル
<html>
<head>
<title>サンプル</title>
<script language="JavaScript">
<!--

function check() {
   alert("画像が正常に読み込みませんでした");
}
//-->
</script>
</head>
<body>
<h2>イベント設定</h2>
<img src="000.jpg" name="img"><br />
<script language="JavaScript">
<!--

document.img.onerror = check;

//-->
</script>
</body>
</html>


キーイベント設定

onkeydown     キーダウン
onkeypress    キープレス
onkeyup       キーアップ

画像に対して発生したイベントを設定します

例

document.mImg.onkeydown = keyFunc
mImgという名前の画像上でキーが押されたときの処理先をkeyFuncにする

document.mImg.onkeypress = keyFunc
mImgという名前の画像上でキーがリピート時の処理先をkeyFuncにする

document.mImg.onkeyup = keyFunc
mImgという名前の画像上でキーが離されたときの処理先をkeyFuncにする


サンプル
<html>
<head>
<title>サンプル</title>
<script language="JavaScript">
<!--

function Keycheck() {
   alert("キーが押されました");
}
//-->
</script>
</head>
<body>
<h2>キーイベント設定</h2>
<img src="000.jpg" name="img"><br />
<script language="JavaScript">
<!--

document.img.onkeydown = Keycheck;

//-->
</script>
</body>
</html>

​


この記事が気に入ったらサポートをしてみませんか？