■ フ ィ ル タ と は ？
フィルタは、ＡｃｔｉｖｅＸコントロールによるＩｎｔｅｒｎｅｔ Ｅｘｐｌｏｒｅｒ４．０以降のマルチメディア機能の一つで、スタイルシートに対するＭｉｃｒｏｓｏｆｔの独自拡張機能です。
ＡｃｔｉｖｅＸコントロールを使用しているため、基本的にＮｅｔｓｃａｐｅ Ｎａｖｉｇａｔｏｒでは実行できません。 文字や画像に対して何らかの効果を直接与えるものです。通常だと、ＨＴＭＬ文に組み込んだ画像などはその通りの画像しか表示してくれません。
しかしフィルタ機能を使うと、その画像に対して例えば影を付けたいといったときにちょっとしたコードを書くだけでその効果が得られます。 さらにスクリプトにより操作することによって静的にフィルタリングするだけでなく動的にもフィルタリングすることができます。
サンプルでその効果を楽しんでみてください。
■ フ ィ ル タ の 記 述 法
-- 画像（文字）の設定 --
//フィルタリングするオブジェクトの設定
<DIV ID="filt" style="position:absolute;width:300;height:200"
onclick="FLT()">
//画像の設定
<IMG ID="image" src="xxx.gif"> </DIV>
-- スクリプトの記述 --
<Script Language="JavaScript">
//画像クリック時にフィルタ実行
function FLT(){
//トランジションの開始
filt.style.filter = "フィルタ名(引数,引数,・・)";
//例:Drop Shadowﾌｨﾙﾀ
filt.style.filter = "dropshadow(offx=10,offy=10,color=#0000FF,enabled=1)"
}
</Script>
-- タグに直接指定する場合 --
//必ずﾌｨﾙﾀをかける範囲をwidthとheightで指定する
<DIV style="width:XXX;height:YYY;
filter:dropshadow(offx=10,offy=10,color=#0000FF,enabled=1)">テキスト又は画像等</DIV>
■ フ ィ ル タ の 種 類
|
X-Ray（Ｘ線）
|
レントゲン写真のような白黒調に表示します
|
enabled
|
ﾌｨﾙﾀを有効にするには１
ﾌｨﾙﾀを無効にするには０
|
|
|
Drop Shadow（ドロップシャドウ）
|
フィルタをかけた要素の後ろに影を付けることができます
|
offx
|
ｘ軸方向(右が正の値)への影のズレ度・単位はピクセル
|
|
offy
|
ｙ軸方向(下が正の値)への影のズレ度・単位はピクセル
|
|
color
|
影の色(１６進表示)
|
|
enabled
|
ﾌｨﾙﾀを有効にするには１
ﾌｨﾙﾀを無効にするには０
|
|
|
Flip Horizontal（左右反転）
|
要素の左右を逆にします
|
enabled
|
ﾌｨﾙﾀを有効にするには１
ﾌｨﾙﾀを無効にするには０
|
|
|
Flip Vertical（上下反転）
|
要素の上下を逆にします
|
enabled
|
ﾌｨﾙﾀを有効にするには１
ﾌｨﾙﾀを無効にするには０
|
|
|
Grayscale（グレースケール）
|
要素からカラー情報を取り去ります。白黒調とは違い、濃淡のある色調を表現します。
|
enabled
|
ﾌｨﾙﾀを有効にするには１
ﾌｨﾙﾀを無効にするには０
|
|
|
Invert（色反転）
|
要素の色相、彩度、明度の値を反転することによってネガ写真のような表現をします
|
enabled
|
ﾌｨﾙﾀを有効にするには１
ﾌｨﾙﾀを無効にするには０
|
|
|
Lights（光源）
|
特定の光源から光を当てているような効果を出すことができます
|
enabled
|
ﾌｨﾙﾀを有効にするには１
ﾌｨﾙﾀを無効にするには０
|
|
|
【 光源の追加 】
|
addAmbientメソッドを使って一定の範囲を明るくする環境光源を追加します
|
R
|
０〜２５５の範囲で光の赤の値
|
|
G
|
０〜２５５の範囲で光の緑の値
|
|
B
|
０〜２５５の範囲で光の青の値
|
|
strength
|
０〜２５５の範囲で光の強さ
|
|
addPointメソッドを使って３次元空間に位置するポイント光源を追加します
|
x
|
光源のｘ座標
|
|
y
|
光源のｙ座標
|
|
z
|
光源のｚ座標
|
|
R
|
０〜２５５の範囲で光の赤の値
|
|
G
|
０〜２５５の範囲で光の緑の値
|
|
B
|
０〜２５５の範囲で光の青の値
|
|
strength
|
０〜２５５の範囲で光の強さ
|
|
-- スクリプトの記述 --
filt.filters.item(0).addAmbient(R,G,B,strength)
filt.filters.item(0).addPoint(x,y,z,R,G,B,strength)
|
|
Motion Blur（移動ぶれ）
|
高速で移動しているときに写真を撮ったときのような一定方向への『ぶれ』を表現します
|
direction
|
４５度単位で要素の移動方向を指定します
|
|
strength
|
ぶれ度を指定します・単位はピクセル
|
|
add
|
０に設定するとぶれの後のイメージに元のイメージを追加します。１に設定するとぶれ後のイメージのみが表示されます。
|
|
enabled
|
ﾌｨﾙﾀを有効にするには１
ﾌｨﾙﾀを無効にするには０
|
|
|
Alpha（不透明）
|
要素の透明度を設定することができます。かなり薄いときに背面に別のものを置くと透けて見えます。
|
opacity
|
スタート地点の不透明度
透明度 ０が完全な透明・１００が完全な不透明
|
|
finishopacity
|
フィニッシュ地点の不透明度
透明度 ０が完全な透明・１００が完全な不透明
|
|
style
|
フィルター状態
０：単一 １：線状 ２：放射線状 ３：長方形
|
|
startX
|
opacityで指定した透明度が始まるＸ座標
|
|
startY
|
opacityで指定した透明度が始まるＹ座標
|
|
finishX
|
finishopacityで指定した透明度が終了するＸ座標
|
|
finishY
|
finishopacityで指定した透明度が終了するＹ座標
|
|
enabled
|
ﾌｨﾙﾀを有効にするには１
ﾌｨﾙﾀを無効にするには０
|
|
|
Shadow（陰影）
|
縁に沿って影を描画します
|
color
|
影の色（１６進表示）
|
|
direction
|
４５度単位で影の描画方向を指定します
|
|
enabled
|
ﾌｨﾙﾀを有効にするには１
ﾌｨﾙﾀを無効にするには０
|
|
|
Wave（波動）
|
まさに波のような表現をします
|
freq
|
波の数
|
|
strength
|
波の強さ
|
|
phase
|
０〜１００の間で波のオフセットを設定します
|
|
lightstrength
|
０〜１００の間で波を照らす光の強さ（輝度）を設定します
|
|
add
|
０に設定するとフィルタ後のイメージに元のイメージを追加します。１に設定するとフィルタ後のイメージのみが表示されます。
|
|
enabled
|
ﾌｨﾙﾀを有効にするには１
ﾌｨﾙﾀを無効にするには０
|
|
|
Glow（発光）
|
右と下の縁に沿って影を描画することによって発光しているかのように見えます
|
color
|
影の色（１６進表示）
|
|
strength
|
０〜１００までの間で発光の強さを設定します
|
|
enabled
|
ﾌｨﾙﾀを有効にするには１
ﾌｨﾙﾀを無効にするには０
|
|
|
Chromakey（クロマキー）
|
指定した色を透明にして背後が透けるようにします
|
color
|
透明にする色（１６進表示）
|
|
enabled
|
ﾌｨﾙﾀを有効にするには１
ﾌｨﾙﾀを無効にするには０
|
|
|
Mask（マスク）
|
指定した色で透明部を塗りつぶします。
|
color
|
マスクする色（１６進表示）
|
|
enabled
|
ﾌｨﾙﾀを有効にするには１
ﾌｨﾙﾀを無効にするには０
|
|
|
|
|