画像のサイズ変更

画像のサイズ変更を使ったプログラム

画像のズームアップ

■■１■■
[概要]
画像がズームアップして表示される

[参照]
DHTML講座（画像のサイズを変更する　等・・・）

[ソース]
<HTML>
<HEAD>
<TITLE>リンクの強調表示</TITLE>
<SCRIPT language="JavaScript">

</SCRIPT>
</HEAD>
<BODY>

<TABLE height=120 width=120>
<TR><TD>

<IMG src="../../../../sozai/icon/life/5.gif" width="0" height="0" id="img1">
</TD></TR>
<TABLE>
<INPUT type="button" onclick="imgZoom()" value="ズームアップ">
</BODY>
</HTML>

※赤は変更点
※緑の部分はコメント部分。一緒に貼り付けても大丈夫。

画像のカットダウン
■■２■■
[概要]
画像が小さく縮小されていく
[参照]
DHTML講座（画像のサイズを変更する　等・・・）
[ソース]
<HTML>
<HEAD>
<TITLE>ステータスバーに文字表示</TITLE>
//始めの大きさ
size2=100;

function imgClose(){
    //始めの大きさ
    sta_size = 100;
    //どこまで小さくするか
    end_size = 0;
    //小さくなるスピード（小さい方がゆっくりで滑らか）
    step = 2;

    if(size2 >= end_size){
        img2.style.width = size2;
        img2.style.height = size2;
        size2 -= step;
        //大きくなるスピード（小さいほど速い）
        timerID2 = setTimeout("imgClose()",10);
    }
    else{
        clearTimeout(timerID2);
        size2 = sta_size;
    }
}
</HEAD>
<BODY>

<TABLE height=120 width=120>
<TR><TD>

<IMG src="../../../../sozai/icon/life/5.gif" width="100" height="100" id="img2">
</TD></TR>
</TABLE>
<INPUT type="button" onclick="imgClose()" value="カットダウン"><p>
</BODY>
</HTML>
※赤は変更点
※緑の部分はコメント部分。一緒に貼り付けても大丈夫。