動くライトで画像を照らす

IE5.0以降のみ（Macintosh版IE5.0では正しく表示されない場合があります）

「light」フィルタを使うと、オブジェクトの一部を光で照らしたような効果を付けることができます。ここでは、動くライトで画像を照らす方法を考えてみましょう。

■　「light」フィルタの設定

スタイルシートを使って、画像に「light」フィルタを設定します。

<IMG ID=img1 STYLE="filter:light();" SRC="nightview.jpg" WIDTH="400" HEIGHT="300">

「light」フィルタのパラメータは JAVA Scriptの「AddPoint()」メソッドや「MoveLight()」メソッドで指定します。

■　ライトの照射位置を変更する関数の設定

カーソルの座標を取得し、カーソルの座標に合わせて画像を表示する関数を記述します。

<SCRIPT LANGUAGE="JavaScript">
<!--
var i=1,x=1,y=120,z=160;
var direction=1;
img1.filters.light.AddPoint(x,y,z,255,255,255,255);

function move(){
if(x>=40){
direction=-1;
}
if(x<=0){
direction=1;
}
img1.filters.light.MoveLight(0,x*10,y,z,true);
if(direction==1){
x++;
}
if(direction==-1){
x--;
}
window.setTimeout("move()",10);
}
//-->
</SCRIPT>

例では、「light」フィルタを使ってオブジェクトの一部を光で照らしたような効果を演出しています。ライトの追加は「AddPoint」メソッドを使って「AddPoint（ｘ座標, ｙ座標, ｚ座標, 赤, 緑, 青, 光の強さ）」の形式で、ライトの移動は「MoveLight」メソッドを使って「MoveLight（ライトの番号, ｘ座標, ｙ座標, ｚ座標, 相対座標・相対座標）」の形式で設定します。

<<<戻る