필터를 이용한 갤러리 만들기 예제

<script language="JavaScript">
<!--
	function show_image(str,str2){
		document.getElementById('img1').filters[0].apply(); //필터적용
		document.getElementById('img1').src = '/images/helper/smp_400_0' + str + '.jpg';
		document.getElementById('txt1').innerHTML = str2;
		document.getElementById('img1').filters[0].play(); //필터실행
	}
//-->
</script>

<p align="center">아래 그림을 클릭하시면 큰 그림이 나옵니다.<br>
<a href="javascript:show_image(1, '이미지 1')"><img src="/images/helper/smp_180_01.jpg" border="0"></a>
<a href="javascript:show_image(2, '이미지 2')"><img src="/images/helper/smp_180_02.jpg" border="0"></a>
<a href="javascript:show_image(3, '이미지 3')"><img src="/images/helper/smp_180_03.jpg" border="0"></a>
<a href="javascript:show_image(4, '이미지 4')"><img src="/images/helper/smp_180_04.jpg" border="0"></a>
<br>
<a href="javascript:show_image(5, '이미지 5')"><img src="/images/helper/smp_180_05.jpg" border="0"></a>
<a href="javascript:show_image(6, '이미지 6')"><img src="/images/helper/smp_180_06.jpg" border="0"></a>
<a href="javascript:show_image(7, '이미지 7')"><img src="/images/helper/smp_180_07.jpg" border="0"></a>
<a href="javascript:show_image(8, '이미지 8')"><img src="/images/helper/smp_180_08.jpg" border="0"></a>
</p>

<p align="center">
<img id="img1" src="/images/helper/smp_400_01.jpg" style="filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=20, percent=1, duration=1)">
<br><br>
<span id="txt1">이미지 1</span>
</p>