「ヒントでピント」をIE Filterで作る

作成日: 2003/5/13 　最終更新日: 2005/1/18

◆概要

ここでは，高林氏に頼まれて作ってみた，クイズ・ヒントでピント風のモザイク効果を作れるテクニックを紹介します．
技術的には，IE FilterとJavaScriptを用いた，非常にシンプルなものです．
＃動作環境には，IE 5.5以上が必要です．

◆細かい使い方

いくつかのオプションを指定することで，他の画像を読み込んだり，モザイクの大きさを変更したりすることができます．

image

URLを指定して他の画像を読み込みます．

size

モザイクの大きさの初期値を指定.(2～50まで指定可能．標準は25)

step

アニメーションのステップ数を指定(1～sizeの値まで指定可能．標準は5)

interval

アニメーションの間隔を指定．(単位:ミリ秒．標準は2000 [2秒] )

各オプションは，組み合わせて利用できます．

ex.) image & interval

◆IE Filter

あまり一般に知られていませんが，IEにはテキスト，画像を問わず適用できる，フィルター(以下，IE Filter)が数多く搭載されています．たとえば，こちらのページには，各フィルターの詳細や動作デモが多数紹介されています．
ここで用いたIE Filterは，PixelateFilterというものです．

実際の使い方は，以下のようになります．

//モザイク効果を適用 (maxsquareは，セルの大きさを示します．）
div1.style.filter = progid:DXImageTransform.Microsoft.Pixelate(maxsquare=10)

//モザイク効果を削除
div1.style.filter = progid:DXImageTransform.Microsoft.Pixelate(enabled=false)

◆参考URL

MSDN Online: Filters and Transitions
<http://msdn.microsoft.com/workshop/author/filter/filters_transitions_entry.asp>
MSDN Online: PixelateFilter
<http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/filters/pixelate.asp>
廃れるリンク　[PDF]
Webページの鮮度を視覚化する手法として，IE Filterを利用しています．
PDFの方が詳しい情報が書いてあります．