画像効果

フリー素材へのリンク

http://churan.hoops.ne.jp/

画像の切り替え

<HTML>
<HEAD><TITLE>Transition Sample</TITLE>
<SCRIPT LANGUAGE=JavaScript>
function doTrans()
{

	document.all.item( "theImg" ).filters.blendTrans.Apply();
	document.all.item( "theImg" ).src="sm050.jpg";
	document.all.item( "theImg" ).filters.blendTrans.Play();

}
</SCRIPT>
</HEAD>

<BODY style="background-color:darkblue">

<IMG ID=theImg src="sm059.jpg" style="filter:'blendTrans(duration=8)'">
<BR>
<INPUT type=button value="Start Transition" onClick="doTrans()">

</BODY>
</HTML>

トランジションフィルタ３種

<HTML>
<HEAD><TITLE>Transition Sample</TITLE>
<SCRIPT LANGUAGE=JavaScript>
function doTrans1()
{

	document.all.item( "StartButton1" ).filters.blendTrans.Apply();
	document.all.item( "StartButton1" ).style.visibility = "hidden";
	document.all.item( "StartButton1" ).filters.blendTrans.Play();

	document.all.item( "StartButton2" ).filters.blendTrans.Apply();
	document.all.item( "StartButton2" ).style.visibility = "visible";
	document.all.item( "StartButton2" ).filters.blendTrans.Play();

	document.all.item( "theImg1" ).filters.revealtrans.Apply();
	document.all.item( "theImg1" ).src="sm059.jpg";
	document.all.item( "theImg1" ).filters.revealtrans.Play();

}

function doTrans2()
{

	document.all.item( "StartButton2" ).filters.blendTrans.Apply();
	document.all.item( "StartButton2" ).style.visibility = "hidden";
	document.all.item( "StartButton2" ).filters.blendTrans.Play();

	document.all.item( "StartButton3" ).filters.blendTrans.Apply();
	document.all.item( "StartButton3" ).style.visibility = "visible";
	document.all.item( "StartButton3" ).filters.blendTrans.Play();

	document.all.item( "theImg1" ).filters.revealtrans.Apply();
	document.all.item( "theImg1" ).style.visibility = "hidden";
	document.all.item( "theImg1" ).filters.revealtrans.Play();

	document.all.item( "theImg2" ).filters.blendTrans.Apply();
	document.all.item( "theImg2" ).style.visibility = "visible";
	document.all.item( "theImg2" ).src="sm050.jpg";
	document.all.item( "theImg2" ).filters.blendTrans.Play();

}

function doTrans3()
{

	document.all.item( "StartButton3" ).filters.blendTrans.Apply();
	document.all.item( "StartButton3" ).style.visibility = "hidden";
	document.all.item( "StartButton3" ).filters.blendTrans.Play();

	document.all.item( "theImg1" ).filters.revealTrans.transition = 12;
	document.all.item( "theImg1" ).style.zIndex = 100;

	document.all.item( "theImg1" ).filters.revealtrans.Apply();
	document.all.item( "theImg1" ).style.visibility = "visible";
	document.all.item( "theImg1" ).filters.revealtrans.Play();

}

</SCRIPT>
</HEAD>

<BODY style="background-color:darkblue">

<IMG ID=theImg1 src="sm008.jpg" style="position:absolute;left:50;top:100;filter:revealTrans(duration=3,transition=0)">
<IMG ID=theImg2 src="sm008.jpg" style="position:absolute;left:250;top:100;visibility:hidden;filter:blendTrans(duration=8)">

<BR>
<INPUT type=button name=StartButton1 value="001" onClick="doTrans1()" style="visibility:visible;filter:blendTrans(duration=3)">
<INPUT type=button name=StartButton2 value="002" onClick="doTrans2()" style="visibility:hidden;filter:blendTrans(duration=3)">
<INPUT type=button name=StartButton3 value="003" onClick="doTrans3()" style="visibility:hidden;filter:blendTrans(duration=3)">

</BODY>
</HTML>

<SCRIPT LANGUAGE=JavaScript>

	document.all.item( "theImg" ).filters.revealtrans.Apply();
	document.all.item( "theImg" ).src="sm059.jpg";
	document.all.item( "theImg" ).filters.revealtrans.Play();

</SCRIPT>