Glow
従来のGlowフィルタ書式(IE4.0〜)
- (HTML)<ELEMENT style="filter:glow(オプション属性)">
- (Script)object.style.filter = "glow(オプション属性)";
IE5.5以降の書式
- (HTML)<ELEMENT STYLE="filter:progid:DXImageTransform.Microsoft.Glow(オプション属性)">
- (Script)object.style.filter ="progid:DXImageTransform.Microsoft.Glow(オプション属性)"
オプション属性
- color= ･･･発光の色。標準の#RRGGBB形式や色名で指定
- strength= ･･･発光の強さ(輝度)を、0(最小光度)〜255(最高光度)の範囲で指定。輝度というより、発光の幅
- enabled= ･･･true,1(デフォルト、フィルタを有効にする)／false,0（無効にする)、このオプションは通常は省略する
補足
- オブジェクトの周囲にフィルタが適用されるが、そのオブジェクトに透明部分が含まれている場合、不透明部分の周囲だけにフィルタが適用される。
- 従来の書式とIE5.5以降の書式では、微妙に結果が違う。strength属性を変更してみればわかるが、IE5.5以降の場合は周囲にフイルタがかかった幅だけオブジェクトがズレる。従来の書式ではオブジェクトは不動。
Sample Source......................................................................>>>
<script language="JavaScript"><!--
c = "gray"; //ｵﾌﾟｼｮﾝcolorの初期値
s = 10; //ｵﾌﾟｼｮﾝstrengthの初期値
function ChangeGlow1(){ //従来の書式で
dv.style.filter = "Glow(color="+c+",Strength="+s+")";
}
function ChangeGlow2(){ //IE5.5以降の書式で
dv.style.filter = "progid:DXImageTransform.Microsoft.Glow(color="+c+",Strength="+s+")";
}
//--></script>
</head>
<body>
<div id="dv" style="position:absolute;filter:progid:DXImageTransform.Microsoft.Glow(color=gray,strength=10)">
<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:60">Glow</span>
</div>
<form name="form1">
■従来の書式(IE4.0〜)でオプション属性を変更する
発光の色を
<select onChange="c=this.value;ChangeGlow1();">
<option value="gray" selected>グレー</option>
<option value="black">黒</option>
<option value="blue">青</option>
<option value="green">緑</option>
<option value="yellow">黄</option>
<option value="pink">ピンク</option>
<option value="brown">ブラウン</option>
<option value="aqua">水色</option>
</select>に、
発光の大きさを
<select onChange="s=this.value;ChangeGlow1();">
<option value="1">1</option>
<option value="3">3</option>
<option value="5">5</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>ピクセルに
■IE5.5以降の書式でオプション属性を変更する
発光の色を
<select onChange="c=this.value;ChangeGlow2();">
<option value="gray" selected>グレー</option>
<option value="black">黒</option>
<option value="blue">青</option>
<option value="green">緑</option>
<option value="yellow">黄</option>
<option value="pink">ピンク</option>
<option value="brown">ブラウン</option>
<option value="aqua">水色</option>
</select>に、
発光の大きさを
<select onChange="s=this.value;ChangeGlow2();">
<option value="1">1</option>
<option value="3">3</option>
<option value="5">5</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>ピクセルに
■Glowフィルタを
<input type="button" value="解除" onclick="dv.style.filter='';">する
</form>