第57回 「画像サイズを変更する」
今回は画像のサイズを変更するプログラムについて説明します。
画像サイズの変更ですが、全てのブラウザ、全てのバージョンで問題なく動作するわけではありませんので注意してください。Internet Explorer 4、Netscape 6以降であれば問題ありません。
画像サイズですがHTMLの<img>タグではwidth、heightを使って指定します。例えば横幅を320ピクセル、縦幅を240ピクセルにするには以下のように書きます。
<img src="photo1.jpg" width="320" height="240">
これだけではJavaScriptで制御しにくいのでnameまたはidで名前/IDを指定します。ここでは多くのブラウザで動作する方法を説明しますのでnameで名前を指定します。
<img src="photo1.jpg" name="myIMG" width="320" height="240">
これでJavaScriptで制御できるようになります。
画像の横幅と縦幅ですが、以下のように指定します。
document.myIMG.width
document.myIMG.height
widthが横幅、heightが縦幅になります。横幅を変数wに入れるには以下のようになります。
w = document.myIMG.width
これで変数wに画像のサイズ（単位はピクセル）が入ります。同様に以下のようにすると変数hに画像の縦幅が入ります。
h = document.myIMG.height
読み出しでなく値を入れれば画像サイズを変更することができます。例えば横幅を480ピクセルにしたい場合には以下のように書きます。
document.myIMG.width = 480
縦幅を360にするのであれば
document.myIMG.height = 360
となります。
以下のプログラムはマウスが画像に乗るとサイズが大きくなり、離れると小さくなります。
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function setImgSize(imgName,w,h)
{
document.images[imgName].width = w;
document.images[imgName].height = h;
}
// --></script>
</head>
<body>
<a href="#" onMouseover="setImgSize('myIMG',480,360)" onMouseout="setImgSize('myIMG',320,240)">
<img src="photo1.jpg" name="myIMG">
</a>
</body>
</html>
これまでのプログラムは自分のマシン上（ローカル上）では問題なく動作します。また高速回線を利用している人でも、あまり問題なく動作します。しかし、低速回線で見ている人や回線が混雑していたりして回線速度が低下してしまった場合には、マウスが画像の上に乗ってもすぐに画像が表示されない事があります。このような場合には、あらかじめ画像を読み込ませておきます。
次回は画像データをあらかじめ読み込ませておく＝プレロードの処理について説明します。