:: 이미지 체인징 효과 ::
다른 그림으로 변할 때, 이미지 전체가 한꺼번에 변하는게 아니고, 시작지점에서 끝지점으로 서서히 채워지며 다음 그림으로 전환하는 효과입니다.

예제에는 happyex01.jpg, happyex02.jpg 이렇게 두개의 그림이 사용됐습니다.

우선 자바스크립트 소스를 <body>~</body>사이에 이미지에 대한 필터 옵션값을 넣습니다.

<script language="JavaScript">
<!--
var picture1="happyex01.jpg"
var picture2="happyex02.jpg"


var picturewidth=500
var pictureheight=151
//-->
</script>


<script language="JavaScript">
<!--
if (document.all) {
document.write('<OBJECT ID="DAControl_Wipe" ')
document.write('STYLE="width:'+picturewidth+';height:'+pictureheight+'"')
document.write('CLASSID="CLSID:B6FFC24C-7E13-11D0-9B47-00C04FC2F51D">')
document.write('</OBJECT>')
m = DAControl_Wipe.MeterLibrary;

whatTransformation = new ActiveXObject("DXImageTransform.Microsoft.Wipe");

whatPictures = new Array();
whatPictures[0] = m.ImportImage(picture1);
whatPictures[1] = m.ImportImage(picture2);

forward = m.Interpolate(0, 1, 3);
back = m.Interpolate(1, 0, 3);
whatMovement = m.Sequence(forward, back).RepeatForever();

whatTransformation.GradientSize = 1.0;
whatTransformation.WipeStyle = 0;

theResult = m.ApplyDXTransform( whatTransformation, whatPictures, whatMovement );

DAControl_Wipe.Image = theResult.OutputBvr;
DAControl_Wipe.Start();

}
//-->
</script>

  • happyex01.jpg 와 happyex02.jpg 는 이미지체인징효과에 사용할 그림의 이름.
    500 과 151 은 이미지체인징효과가 일어나는 범위(그림의 가로 세로크기에 맞춰주시면 되겠죠)

  • forward = m.Interpolate(0, 1, 3); 에서 3은 오른쪽방향( → ) 속도
    back = m.Interpolate(1, 0, 3); 에서 3은 왼쪽방향 ( ← ) 속도입니다. 큰 수일수록 느려집니다.