프리카운터넷

프로그래밍&개발

기존 공부방

아래 예제는 이미지를 바꿨을 때 적용되어 지는 예제 입니다.
그냥 이미지에 필터만 적용시켰을 경우 효과는 나타나지 않으며 그 필터가 적용된 이미지가 다른 이미지로
바뀌어질 경우에 그 효과가 적용이 됩니다. 이 효과는 이미지가 아닌 다른 것에도 사용이 가능합니다.

이 필터는 IE 5.5 이상부터 사용가능 합니다.

아래 설정을 바꾸어 가면서 실행 버튼을 눌러 보세요. (↓직접찍은 사진들 ^^;)

orientation:

duration:


	[소스] <script language="JavaScript"> <!-- //이미지 정의 (미리 불러오기 기능) var imgs1 = new Image() imgs1.src = 'share3.jpg' var imgs2 = new Image() imgs2.src = 'share4.jpg' var chk=0 function gogo(){ img1.filters[0].apply() //필터적용 if(chk==0){ img1.src = imgs2.src chk=1 } else if(chk==1){ img1.src = imgs1.src chk=0 } img1.filters[0].play() //필터실행 } //--> </script> <p align="center"> 아래 설정을 바꾸어 가면서 실행 버튼을 눌러 보세요. (↓직접찍은 사진들 ^^;)<br> <img src="share3.jpg" name="img1" style="filter:progid:DXImageTransform.Microsoft.RandomBars(orientation=vertical, duration=1)"></p> <table class="fon1" align="center" border="0" cellpadding="3" cellspacing="1" bgcolor="#666666"> <tr> <td bgcolor="#FFFFEE"><p align="center"> orientation:</p> </td> <td bgcolor="#FFFFEE"><p align="center"> <select size="1" onchange="img1.filters.item(0).orientation=this.value"> <OPTION VALUE="horizontal">수평</OPTION> <OPTION VALUE="vertical" selected>수직</OPTION> </select></p> </td> <td bgcolor="#F7FDFF"><p align="center"> duration:</p> </td> <td bgcolor="#F7FDFF"><p align="center"> <select size="1" onchange="img1.filters.item(0).duration=this.value"> <option value="1" selected>1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select></p> </td> <td bgcolor="white"><p align="center"> <input type="button" value=" 실행 " onclick="gogo()"></p> </td> </tr> </table>