◆プロパティー(Properties)
IMGタグにフィルターとオブジェクトを定義し、スクリプト(JavaScript関数を作成)で動作を制御します。 このスクリプトを、JOBタグにイベントハンドラーonLoadを定義し起動します。 下のプロパティー値の選択により、左のサンプルを制御出来ます。 同時に、ソースコードに反映されます。
オブジェクト.filters.BlendTrans.Appy(); //フィルターのAppy()メソッド オブジェクト.SRC="Objectの切り替える画像"; // オブジェクト.filters.BlendTrans.Play(); //フィルターのPlay()メソッド <JOB onLoad="setTimeout('blend_trans()',5000)"><!--blend_trans()はJavaScript関数を起動--> ◆オブジェクトをブレンドしながら切り替えます。 サンプルでは、ページロード時に(最初に)表示される画像-チューリップは、IMGダグで指定し、 切り替える画像(後に表示)-野アザミは、スクリプトで指定しています。 最初の画像の表示の長さは、JOBタグ内のスクリプトのメソッドSetTimeoutのタイマー値(ms)で決めます。 後の画像は、ブレンドしながらラフィルターのDuration値(秒)後切り替わります。 |
<SCRIPT LANGUAGE=JAVASCRIPT>
//BlendTrans Filterのスクリプト処理 Apply()(初期化)、Play()(実行)メソッド使用
<!--
var Status = 0
var blenTid
function blend_trans(){
document.all["BlendTransDisp"].filters.BlendTrans.Apply()
if(Status==0){
document.all["BlendTransDisp"].src="./img/PHT_028.jpg" //切り替える画像(後)
Status=1
}
else{
document.all["BlendTransDisp"].src="./img/PHT_026.jpg" //ページロード時の画像(最初)
Status=0
}
document.all["BlendTransDisp"].filters.BlendTrans.Play()
//blendTid=setTimeout('blend_trans()',5000) //ループしたい場合
}
//-->
</SCRIPT>
<BODY onLoad="LoadImages('./img/PHT_026.jpg','./img/PHT_028.jpg'); setTimeout('blend_trans()',5000)">
<IMG id=BlendTransDisp style="POSITION: absolute; TOP: 40px; LEFT: 20px; WIDTH: 320px; HEIGHT: 240px; font-size:22px;
filter:BlendTrans(Duration=4)" SRC="./img/PHT_026.jpg"><!--フィルタ及び初期の画像を定義-->