Compositor フィルター

指定した要素のHTMLを元に、さまざまなマスクをかけるフィルターです。 0 - 25まで種類がありますが、なぜか11 - 18の間が抜けています。

BODYに記述

<div id="divFilter" style="filter:progid:DXImageTransform.Microsoft.Compositor(Function=20);width:300px;height:200px;"> 元になる要素を記述 </div> <div id="divMask" style="display:none;"> マスクとなる要素を記述 </div> <SCRIPT type="text/javascript"> function OnLoad(){ if(navigator.appVersion.indexOf("MSIE 5.5")>=0){ divFilter.filters[0].Apply(); divFilter.innerHTML=divMask.innerHTML; divFilter.filters[0].Play(); } } window.onload=OnLoad </SCRIPT>

Function	マスクのかけ方。指定できる値は0-25。規定値は0。なぜか11-18が抜けている。 Functionの値と効果 0 元要素とマスク要素を両方とも削除 1 両方の画像のピクセルの明度を比較し、暗いほうを表示する 2 両方の画像のピクセルの明度を比較し、明るいほうを表示する 3 元要素のみ表示 4 マスク要素の上に元要素を重ねて表示 5 元要素の、マスク要素と重なっている部分のみを表示 6 元要素の、マスク要素と重なっていない部分のみを表示 7 マスク要素と重なっている元要素とマスク要素を表示 8 元要素をマスク要素でひく（マスク要素を反転し元要素に合成させる。反転した色が濃いほど透明になる）。 9 元要素にマスク要素をたす（マスク要素を反転し元要素に合成させる。色が濃いほど透明になる）。 10 元要素からマスク要素の占める領域をひく 19 元要素のみ表示 20 元要素とマスク要素を両方表示 21 マスク要素のみ表示 22 マスク要素から元要素の占める領域をひく 23 元要素とマスク要素の内、元要素の占める領域のみを表示 24 元要素をマスク要素でひいた画像のうち、マスク要素が占める領域のみを表示 25 元要素にマスク要素をたした画像のうち、マスク要素が占める領域のみを表示
Apply()	スクリプトから実行するメソッド。
Play()	スクリプトから実行するメソッド。フィルターを適用させる。

• DIV、SPAN タグで使用する場合は position を absolute にするか、または width,height を指定すること。
• 参考: http://msdn.microsoft.com/workshop/author/filter/reference/filters/compositor.asp