画像の表示サイズをわずかに拡大して表示する処理を連続して行うと、画像がズームインするような効果を与えることができます。ここでは、JAVA Scriptを使って、画像をズームインする方法を考えてみましょう。
ページの読み込みが完了した時に、「onLoad」イベントを使って画像をズームインするための関数「imgZoom()」を呼び出します。
<BODY onLoad="imgZoom();>
画像の定義-
<IMG SRC="../../assets/images/IMG0063.jpg" ID=img1 ALT="雪山を見ながら魚を漁る" BORDER=1 WIDTH="750" HEIGHT="510">「width」「height」プロパティを使って画像の幅と高さを取得し、幅と高さの値を0％から100％まで5％刻みで連続して変化させる関数を記述します。
<SCRIPT LANGUAGE="JavaScript">
<!--
var i=0,w=0,h=0;w=img1.width;
h=img1.height;function imgZoom(){
img1.style.width=w*i;
img1.style.height=h*i;
i=i+0.05;
if(i<=1){
setTimeout("imgZoom()",50);
}
}
//-->
</SCRIPT>例では、JAVA Scriptを使って画像サイズを連続して変更することで、画像をズームイン表示しています。
このスクリプトでは、画像の「width（幅）」と「height（高さ）」プロパティに画像の倍率を表す変数（i）を掛け、変数の値を「0」から「1」まで徐々に大きくしていくのがポイントです。
画像をズームインする速さは「setTimeout」メソッドで指定する値で調整することができます。「setTimeout」メソッドの値を「1」にしたときに、最もズームインの速度が速くなります。例とは逆に画像の幅と高さを徐々に小さくしていくと、画像を徐々に小さく（ズームアウト）表示することができます。ズームアウト表示をするには、「ズームイン表示の設定」のスクリプトで表示倍率に関係している箇所を次のように置き換えます。
変数の定義 var i=0,w=0,h=0; var i=1,w=0,h=0; 表示倍率の計算 i=i+0.05; i=i-0.05; 繰り返し処理を終了するための判定 if(i<=0){ if(i>=0)[
