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

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

「blendTrans」フィルタを使うと、次に表示する画像の透明度を徐々に変化させながら画像を切り替えることができます。ここでは、「blendTrans」フィルタを使って、次の写真g甘えの写真の下から浮かび上がるように表示する方法を考えてみましょう。

■　「blendTrans」フィルタの設定

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

<TD WIDTH="400"><IMG SRC="../../assets/images/ocean1.jpg" width="600" height="400" ID=pic1 STYLE="filter:blendTrans(duration=3.0)">

「blendTrans」フィルタの「duration」の値で画像の切り替え時間を調整することができます。このとき「duration」は秒単位で設定します。

■　画像の切り替えの設定

「blendTrans」フィルタを使って、次の画像が浮かび上がるように切り替えます。

<SCRIPT LABGUAGE="JavaScript">
<!--
var i=1;
picfilter();

function picfilter(){
if(i<3){
i++;
}
else{
i=1;
}
pic1.filters.blendTrans.Apply();
pic1.src="../../assets/images/ocean"+i+".jpg";
pic1.filters.blendTrans.Play();
window.setTimeout("picfilter()",5000);
}
//-->
</SCRIPT>

例では、「blendTrans」フィルタを使って画像を切り替える際に次の画像が徐々に現れるように表示しています。画像に「blendTrans」フィルタを適用するには、まず「apply()」メソッドを実行し、フィルタを適用する準備をします。次に切り替え後に表示する画像を指定してから「play()」メソッドを実行し、画像の切り替えを実行します。
画像を切り替える時間は、「blendTrans」フィルタで設定した「duration」 の値で調整することができます。

<<<戻る