example
Dynamic HTML
Library
explain
source code
・HEAD部の記述
  <SCRIPT LANGUAGE="JavaScript">
  <!--
   function show() {
     id1.filters[0].apply();
     id1.style.visibility = "visible";
     id1.filters[0].play();
   }
  // -->
  </SCRIPT>

・BODY部の記述
  <A HREF="javascript:show()">クリック</A>
  <DIV ID="id1" STYLE="position:absolute;
                       filter:revealTrans(transition=num,Duration=sec);
                       visibility:hidden">対象要素</DIV>
source point
上記の source code はトランジションフィルタを簡単に記述したものだ。 example で使っているソースコードとは、かなり違うので注意してほしい。

まずは BODY 部の説明から...
関数 show() を呼び出すリンクを作成し、フィルタを掛けるオブジェクト (id1) を作成する。
このオブジェクトのスタイル設定では、CSS-Positioning を使用して絶対位置(absolute)を指定する。 そして、トランジションフィルタ(revealTrans)の設定をする。num には 0 〜 23 の ID number で指定し、sec にはフィルタが実行されている秒数を指定する。 このときオブジェクトの表示状態は非表示(hidden)にする。 対象要素 にはテキストや画像を指定するのが一般的だ。

次に HEAD 部の説明をしよう。
まずは、オブジェクトを表示(visible)にする。ポイントはこの次の 2 行である。
あまり見慣れない apply() と play() というメソッドがあることに気付いただろう。 これはトランジションフィルタ固有のメソッドで、apply() は トランジションフィルタの宣言で、play() はその実行を意味する ものである。また、それぞれに filters[0] と記述しているが、 これはフィルタコレクションにアクセスするために必要な記述で、括弧内の引数はオブジェクトに 設定した認識名(ID)を指定順に番号を振ったものである。通常は 0 で問題ないが、 一つのドキュメント内に同じ認識名のオブジェクトが複数存在し、それぞれにフィルタを 掛けるときは、その数に応じて引数を設定する。