Blur
Motion Blurフィルタの書式
- 移動ぶれ。一定方向にブレているようにぼやける。(フィルタが適用されるには、オブジェクトのstyle設定でabsolute、width、heightのいずれかの設定が必要）
- (HTML)
(IE4/IE5.0)<ELEMENT STYLE="filter:blur(direction=d,strength=s,add=a)">
(IE5.5〜)
<ELEMENT STYLE="filter:progid:DXImageTransform.Microsoft.MotionBlue(direction=d,strength=s,add=a)">
- (Scripting)
(IE4/IE5.0)object.style.filter=blur(direction=d,strength=s,add=a)";
(IE5.5〜)object.style.filter ="progid:DXImageTransform.Microsoft.MotionBlue(direction=d,strength=s,add=a)";
- オプション属性
direction･･･ブレの方向を指定。デフォルトは 0 (真上になる)。
時計回りで45度単位に設定(45,90,135,225,270,315)、90は右、180は下、270が左になる
strength･･･ブレの強さ。要素が何ピクセル分ぶれるかを指定。
add･･･ブレたイメージと元のイメージを合成する＜1,true＞か、元のｲﾒｰｼﾞは取り除くか＜0,false＞を指定。
enabled ･･･1(デフォルト、フィルタを有効にする)／0（無効にする)
Sample Source......................................................................>>>
<script language="JavaScript"><!--
d = 45; //ｵﾌﾟｼｮﾝdirectionの初期値
s = 10; //ｵﾌﾟｼｮﾝStrengthの初期値
a = 1; //ｵﾌﾟｼｮﾝAddの初期値
function ChangeMBlur(){ //IE5.5〜の書式で
dv.style.filter = "progid:DXImageTransform.Microsoft.MotionBlur(direction="+d+",Strength="+s+",Add="+a+")";
}
//････以下はIE4やIE5.0用
function ChangeMBlur2(){
dv.style.filter = "Blur(direction="+d+",Strength="+s+",Add="+a+")";
}
//--></script>
</head>
<body>
<div id="dv" style="position:absolute;filter:progid:DXImageTransform.Microsoft.MotionBlur
(Strength=10, Direction=45, Add=1)">
<img src="../../java/jadata/ja02a.jpg" width="200" height="150">
<img src="../../images/cut/025.gif" width="103" height="116">
<span style="color:green;font:80">Blur</span></div>
</div>
<form name="form1">
ブレの方向を
<select name="direc" onChange="d=this.value;ChangeMBlur();">
<option value="0">0(上)</option>
<option value="45" selected>45(右上)</option>
<option value="90">90(右)</option>
<option value="135">135(右下)</option>
<option value="180">180(下)</option>
<option value="225">225(左下)</option>
<option value="270">270(左)</option>
<option value="315">315(左上)</option>
</select>に
ブレの強さを
<select name="str" onChange="s=this.value;ChangeMBlur();">
<option value="1">1</option>
<option value="2">2</option>
<option value="4">4</option>
<option value="6">6</option>
<option value="8">8</option>
<option value="10" selected>10</option>
<option value="12">12</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
</select>ﾋﾟｸｾﾙに
元のイメージを
<input type="radio" name="add" value="1" checked onclick="a=this.value;ChangeMBlur();">残す／
<input type="radio" name="add" value="0" onclick="a=this.value;ChangeMBlur();">残さない
Motion Blurフィルタを
<input type="button" value="解除"
onclick="dv.style.filter = 'progid:DXImageTransform.Microsoft.MotionBlur(enabled=0)'">する
<p>････････････････････････<br>
■IE4.0やIE5.0で表示するには次のボタンを押してください。</p>
<input type="button" value="フィルタを適用する" onclick="ChangeMBlur2()">／
<input type="button" value="フィルタを解除する" onclick="dv.style.filter=''">