透明オブジェクトにMaskフィルタ

　HOME 　>>> 　HTML整理ノート　>>> DHTML -- 基本編　　　応用編

Sampleの画像は透明度100から10へ変化する放射状グラデェーション、"MaskFilter"文字列は透明度10から100へ変化する線状グラデェーションをかけています。
Alphaフィルタなどで透明化されたオブジェクトは、透明度に応じてMaskFilterがかかる。

Sample

MaskFilter

Sample Source......................................................................>>>

<script language="JavaScript"><!--
function MaskSet(c){	 
 dv.style.filter="progid:DXImageTransform.Microsoft.maskfilter(color="+c+")";
}
function MaskClear(){
 dv.style.filter="";
}
//--></script>
</head>

<body>
<div id="dv" style="position:absolute;width:350;height:240;border:thin solid navy;font:900 35;text-align:center">
　<font size=5>Sample</font><br>
　<img style="position:relative;left:5; width:30%;border:2mm groove blue;
　　　filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100,finishopacity=10,style=2)" 
　　　src="../../images/cut/025.gif">
　<span style="position:relative;left:5; top:3;width:90%;background-color:skyblue;
　　　color:red;border:3mm double blue;
　　　filter:progid:DXImageTransform.Microsoft.Alpha(opacity=10,finishopacity=100,
　　　　　style=1,startx=10,starty=0,finishx=100,finishy=0)">MaskFilter</span>
</div>
<form name="form1">
 MaskFilterを 
 <select name="maskcolor" onchange="MaskSet(this.value)">
  <option value="" selected>(色を選択して下さい)</option>
  <option value="black">黒</option>
  <option value="gray">ｸﾞﾚｰ</option>
  <option value="blue">青</option>
  <option value="green">緑</option>
  <option value="pink">ﾋﾟﾝｸ</option>
  <option value="brown">ﾌﾞﾗｳﾝ</option>
  <option value="violet">薄紫</option>
 </select>色でかける<br>
 MaskFilterを 
 <input type="button" value="解除" onclick="MaskClear()">する 
</form>

end(最終更新:12/11/10)