example
イメージをクリックするとズームイン・ズームアウトします。

source code
・HEAD部の記述
  <SCRIPT LANGUAGE="JavaScript">
  <!--
    var flag = true;
    function zoom() {
      if ( flag == true ) {
        if ( imgs.style.pixelWidth > 50 ) {
          imgs.style.pixelWidth -= 1;
          imgs.style.pixelHeight -= 1;
          window.setTimeout("zoom()",1);
        }
        else { flag = false; }
      }
      else {
        if ( imgs.style.pixelWidth < 250 ) {
          imgs.style.pixelWidth += 1;
          imgs.style.pixelHeight += 1;
          window.setTimeout("zoom()",1);
        }
        else { flag = true; }
      }
    }
  // -->
  </SCRIPT>

・BODY部の記述
  <IMG SRC="zippo.jpg" ID="imgs"
        STYLE="width:250px;height:250px" onClick="zoom()">
source point
onClick event によって画像を縮小・拡大させる Dynamic HTML です。
まずは BODY 部の説明から...
画像のスタイルとして width:250px;height:250px; を指定しています。 このように画像の初期サイズを指定しておかないと、最初のクリック時におかしな 動作をしますので注意が必要です。
画像の ID は imgs として 関数 zoom() から認識できるようにしています。
次に HEAD 部の説明...
全体として2つのブロックにわかれています。1つは画像を縮小するブロック、 もう1つは拡大するブロックです。どちらのブロックを実行するかは、変数 flag の値によって条件分岐しています。
縮小するブロックでは、画像の幅が 50pixel になるまで 幅・高さ ともに 1pixel ずつ減少させています。 幅が 50pixel になると、縮小処理をしているループから抜け、 次の else へ処理が移行し、変数 flag の値を false へスイッチしています。
拡大するブロックでは、画像の幅が 250pixel になるまで 幅・高さ ともに 1pixel ずつ増加させています。 幅が 250pixel になると、拡大処理をしているループから抜け、 次の else へ処理が移行し、変数 flag の値を true へスイッチしています。