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