프리카운터넷

프로그래밍&개발

기존 공부방

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

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

아래 설정을 바꾸어 가면서 실행 버튼을 눌러 보세요.

squaresX:

squaresY:

direction:

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.Checkerboard(squaresX=12, squaresY=8, direction='right', duration=1)" width="400" height="300"></p> <table class="fon1" align="center" border="0" cellpadding="3" cellspacing="1" bgcolor="#666666"> <tr> <td bgcolor="#FFFFEE"><p align="center"> squaresX:</p> </td> <td bgcolor="#FFFFEE"><p align="center"> <select size="1" onchange="img1.filters.item(0).squaresX=this.value"> <OPTION VALUE="2">2</OPTION> <OPTION VALUE="4">4</OPTION> <OPTION VALUE="8">8</OPTION> <OPTION VALUE="12" selected>12</OPTION> </select></p> </td> <td bgcolor="#FFF6F6"><p align="center"> squaresY:</p> </td> <td bgcolor="#FFF6F6"><p align="center"> <select size="1" onchange="img1.filters.item(0).squaresY=this.value"> <OPTION VALUE="2">2</OPTION> <OPTION VALUE="4">4</OPTION> <OPTION VALUE="8" selected>8</OPTION> <OPTION VALUE="12">12</OPTION> </select></p> </td> <td bgcolor="#EDFFEC"><p align="center"> direction:</p> </td> <td bgcolor="#EDFFEC"><p align="center"> <select size="1" onchange="img1.filters.item(0).direction=this.value"> <OPTION VALUE="up">위로</OPTION> <OPTION VALUE="down">아래로</OPTION> <OPTION VALUE="left">왼쪽으로</OPTION> <OPTION VALUE="right" 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> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select></p> </td> <td bgcolor="white"><p align="center"> <input type="button" value=" 실행 " onclick="gogo()"></p> </td> </tr> </table>