ＤＨＴＭＬ研究室

Back to Title Page(OpenLab)タイトルページへ戻る

ＤＨＴＭＬでタイマーを使用する。.

TITLE:フェードイン

　マウスカーソルの動きで表示するイメージに変化を持たせます。スクリプトにＪａｖａＳｃｒｉｐｔを使用しています。また、フィルターとして、ＤＨＴＭＬのビジュアルフィルターを使用しています。

　さらにリアルタイムで変化させるためにタイマースクリプトを追加します。
　タイマースクリプトのインターバルを開始するために、ＨＴＭＬの <BODY>タグで初期化関数を呼び出しています。初期化の位置を変更することでマウスでクリックしたら開始するとか、マウスが画像の上にあるときだけ動作するなどの処理も行えます。
　このサンプルでは、イメージをフェードインしたのち、タイマーを解放してシステムリソースの消費を抑えています。

上のＤＨＴＭＬ部分のソースコードです。

< img src="Japanese.gif" style="filter: alpha(opacity=0)"
width="100" height="16" alt="Language">
<script language="JavaScript">
function init(){
sample.flashTimer=setInterval("style_change(sample,1)",50);
}
function style_change(obj,d){
obj.filters.alpha.opacity = (obj.filters.alpha.opacity + d)%101;
if(obj.filters.alpha.opacity>=100)clearInterval(sample.flashTimer); }
</script>